Static design system
These are all the available components and their styling.
Colors
.c-white.c-white-bg.c-dark.c-dark-bg.c-primary.c-primary-bg.c-secondary.c-secondary-bg.c-yellow.c-yellow-bg.c-grey.c-grey-bg.c-light.c-light-bgTypography
Header level 1
second line
Header level 2
second line
Header level 3
second line
Header level 4
second line
Header level 5
second line
Header level 6
second line
.text-block
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veniam dolore ipsa, suscipit alias eligendi, amet nisi eum, deleniti libero iusto rem impedit quam nostrum quas adipisci quis. Pariatur, laudantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga et in aspernatur doloribus labore quo est omnis nulla illum, aut assumenda necessitatibus obcaecati totam amet esse autem sint repellat aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptas odio ad atque minima quaerat, officiis vitae eligendi libero qui doloribus aut distinctio deleniti dolore animi minus velit. Atque, soluta.
Modules
All modules used on this site
Header-block
.header-block
.header-block--small
.header-block
Career
This is where you can find our current openings for employees.
No opening that suits you? We are always interested in good people so send us and email at office@swedishschool.org.uk
.header-block--small
Small Career
Hero
.hero
.hero--video
.hero
.hero--video
Swedish school
in London
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
Text+image
.text-image
.text-image--mirror
.text-image
Daily life at the school and something else
Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
.text-image--mirror
Daily life at the school and something else
Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Daily life at the school and something else
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Ingress block
.ingress-block
.ingress-block--invert
.ingress-block
A safe place to study
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
.ingress-block--invert
A safe place to study
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Promo
.promo
.promo--large
.promo--icon
.promo__grid
.promo__grid
School staff
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Swedish curriculum
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
A safe environment
Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
.promo__grid + .promo--icon
School staff
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Swedish curriculum
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
A safe environment
Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
.promo--large
Host family in Richmond wanted
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
.promo-image
A combined campus for pre-school and elementary classes
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Testimonials
.testimonials
”The engagement among the staff and the parents is amazing”
Text + link-box
.text-link-box
Financial possibilities
Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Large image + text box
.large-image-text-box
.large-image-text-box
School events and integration among the students
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes.
Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
.large-image-text-box with video
School events and integration among the students
Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes.
Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
4 columns
.columns--four
.columns--four
Documents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nisi voluptatibus pariatur, tenetur eaque libero accusantium debitis illum impedit labore minus deserunt blanditiis aliquid, adipisci atque! Odio ea, consequatur perspiciatis!
Policy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto error, natus atque beatae? Ex quod atque vitae praesentium adipisci excepturi vel. Dolores, eos voluptatem nobis pariatur iure sequi labore?
Informational links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem odit aut quam et maxime, illum, id, minus enim, eligendi dignissimos repellendus error. Molestias fugiat atque voluptatum laboriosam ducimus, ut non.
Informational links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem odit aut quam et maxime, illum, id, minus enim, eligendi dignissimos repellendus error. Molestias fugiat atque voluptatum laboriosam ducimus, ut non.
columns
.columns
.columns
Documents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nisi voluptatibus pariatur, tenetur eaque libero accusantium debitis illum impedit labore minus deserunt blanditiis aliquid, adipisci atque! Odio ea, consequatur perspiciatis!
Policy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto error, natus atque beatae? Ex quod atque vitae praesentium adipisci excepturi vel. Dolores, eos voluptatem nobis pariatur iure sequi labore?
Informational links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem odit aut quam et maxime, illum, id, minus enim, eligendi dignissimos repellendus error. Molestias fugiat atque voluptatum laboriosam ducimus, ut non.
.columns--frame
Documents
Policy
Informational links
Documents
Policy
.columns columns--boxes
Documents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nisi voluptatibus pariatur, tenetur eaque libero accusantium debitis illum impedit labore minus deserunt blanditiis aliquid, adipisci atque! Odio ea, consequatur perspiciatis!
Policy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto error, natus atque beatae? Ex quod atque vitae praesentium adipisci excepturi vel. Dolores, eos voluptatem nobis pariatur iure sequi labore?
Informational links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem odit aut quam et maxime, illum, id, minus enim, eligendi dignissimos repellendus error. Molestias fugiat atque voluptatum laboriosam ducimus, ut non.
Documents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nisi voluptatibus pariatur, tenetur eaque libero accusantium debitis illum impedit labore minus deserunt blanditiis aliquid, adipisci atque! Odio ea, consequatur perspiciatis!
Policy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto error, natus atque beatae? Ex quod atque vitae praesentium adipisci excepturi vel. Dolores, eos voluptatem nobis pariatur iure sequi labore?
Informational links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem odit aut quam et maxime, illum, id, minus enim, eligendi dignissimos repellendus error. Molestias fugiat atque voluptatum laboriosam ducimus, ut non.
.footer-cta
FAQ boxes
.faq-box
.faq
Students
- Are there any events in Sweden where I can meet SSL lorem ipsum dolem es simet?
- Are there any events in Sweden where I can meet SSL lorem ipsum dolem es simet?
- Are there any events in Sweden where I can meet SSL lorem ipsum dolem es simet?
- Are there any events in Sweden where I can meet SSL lorem ipsum dolem es simet?
- Are there any events in Sweden where I can meet SSL lorem ipsum dolem es simet?
Parents
Host family
Slider
.slider
Helpclasses
Except from Bootstrap 4 Utility classes, there are some usefull helpclasses:
.flex-expand > .flex-expand__item - Make two siblings children the same height (ex about-us text fields under the maps)
.section-spacing - Add some spacing around sections
.c-primary-bg - Ex of helpclasses for colors, see all variations under colors
Icons
Generate more icons using Fully Studios login on icomoon. (project SSL)
Use color helpclasses to color the icon. Eg: .c-primary on the icon or the container