Styles
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
This is a paragraph modipiciis2 dolupta2 dollatem quissi cumquassunte this is a link ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
- This is an unordered list utet unt.
- Event ut dest quassimus re cusdani scitatiorrum reptio. Et ea nonsequiam re dolupta spelendem solor aut harum
- qui il mod quatusda
- comnim volo et porum
- quassimus re cusdani scitatiorrum reptio.
- voluptatis evel et voluptia cumquam quia que con num aciam
This is a bold link Alit expersp edipicaepra sunt ullabor epeles endae in consedio ipiendam facea vent dolupti onsecest, sit labor sincia doluptam nis et alitat alistru ptibus nonempo ssimpore modi berestrum ius, nis ium ut rem nullendios cum nes qui conseru ptataspe pore dolorat ecest, te cones ditios istis dolorum res ne net dolor si nobitam.
- This is an ordered list Della sit il ereped utet unt.
- Event ut dest quassimus re cusdani scitatiorrum reptio. Et ea nonsequiam re dolupta spelendem solor aut harum
- voluptatis evel et voluptia cumquam quia que con num aciam
This is a blockquote Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur.
Cite Name
Comment
This is a blockquote with color 1 background Modipiciis dolupta dollatem quissi cumquassunte.
Cite Name
Comment
class="shs-bg-color-1"
DM Serif Display Font
DM Serif Display Regular 400
Poppins Font
Poppins Light 300
Poppins Light Italic 300
Poppins Regular 400
Poppins Italic 400
Poppins Bold 700
Poppins Bold Italic 700
<h1> Lorem ipsum dolor sit amet
Modipiciis dolupta dollatem quissi cumquassunte This is a link ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta This is a link dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h5> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h6> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
Global Color Palette
primary
var(--primary)#3E5E6B
secondary
var(--secondary)#456F81
white
var(--white)#ffffff
moonstone-blue
var(--moonstone-blue)#7AB1C9
fresh-blue
var(--fresh-blue)#ADE1F9
ice-blue
var(--ice-blue)#F1FAFE
peach
var(--peach)#FFE3B8
cream
var(--cream)#F9F4EC
lilac
var(--lilac)#8D5C9E
purple
var(--purple)#A474B5
lavender
var(--lavender)#E4D0EB
error
var(--error)#ff4e7a
Buttons
Custom CSS helpers
Remove paragraph <p> bottom margin
shs-no-margin-b
Text Small
shs-text-small
Text Large
shs-text-large
Text Lead
shs-text-lead
Heading Kicker
shs-heading-kicker
- Remove <ul> list left margin
- Pariatur duis eu sint. In velit culpa occaecat voluptate non ut fugiat. Amet sint.
- Incididunt ipsum elit ex voluptate quis pariatur est enim.
shs-list-no-margin-l
EN Heading Maori Heading
shs-maori
Heading h1 Small on Mobile
shs-heading-h1-small-on-mobile
Heading Fake h1
Make other <hn> look like h1
shs-heading-fake-h1
Heading Fake h2
Make other <hn> look like h2
shs-heading-fake-h2
Heading Fake h3
Make other <hn> look like h3
shs-heading-fake-h3
Blockquote with transparent background
Cite Name
Comment
shs-bg-color-0
Applies to <blockquote>
Blockquote with color 1 background
Cite Name
Comment
shs-bg-color-1
Applies to <blockquote>
Blockquote with color 1 background / no decoration
Cite Name
Comment
shs-bg-color-1 shs-no-decoration
Applies to <blockquote>
Blockquote with color 2 background
Cite Name
Comment
shs-bg-color-2
Applies to <blockquote>
Blockquote with color 2 background / no decoration
Cite Name
Comment
shs-bg-color-2 shs-no-decoration
Applies to <blockquote>
shs-mobile-max-width
Limits item width on mobile to 480px + centers horizontally
shs-mobile-max-width-narrow
Limits item width to 280px on mobile + centers horizontally
Table
| Header | Header | Header | |
|---|---|---|---|
| Regular Text | Headingshs-heading |
Text Bigshs-big |
Boldshs-bold |
shs-table
Color black SVG image
shs-img-color-white
Applies to black color SVG file
shs-img-color-primary
Applies to black color SVG file
shs-img-color-fresh-blue
Applies to black color SVG file
shs-img-color-peach
Applies to black color SVG file
Local Icons
font-family
Selwyn-House-School-Icons
Accessibility Colour Matrix
| Colour | primary #3E5E6B | secondary #456F81 | white #ffffff | moonstone-blue #7AB1C9 | fresh-blue #ADE1F9 | ice-blue #F1FAFE | peach #FFE3B8 | cream #F9F4EC | lilac #8D5C9E | purple #A474B5 | lavender #E4D0EB | error #ff4e7a |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| primary #3E5E6B | 7.0 : 1 | 4.9 : 1 | 6.6 : 1 | 5.6 : 1 | 6.4 : 1 | 4.8 : 1 | ||||||
| secondary #456F81 | 5.5 : 1 | 5.2 : 1 | 5.0 : 1 | |||||||||
| white #ffffff | 7.0 : 1 | 5.5 : 1 | 5.1 : 1 | |||||||||
| moonstone-blue #7AB1C9 | ||||||||||||
| fresh-blue #ADE1F9 | 4.9 : 1 | |||||||||||
| ice-blue #F1FAFE | 6.6 : 1 | 5.2 : 1 | 4.8 : 1 | |||||||||
| peach #FFE3B8 | 5.6 : 1 | |||||||||||
| cream #F9F4EC | 6.4 : 1 | 5.0 : 1 | 4.6 : 1 | |||||||||
| lilac #8D5C9E | 5.1 : 1 | 4.8 : 1 | 4.6 : 1 | |||||||||
| purple #A474B5 | ||||||||||||
| lavender #E4D0EB | 4.8 : 1 | |||||||||||
| error #ff4e7a |