| Breakpoint name | XS | SM | MD | LG |
|---|---|---|---|---|
| Breakpoint size | < 480px | ≥ 480px | ≥ 768px | ≥ 1199px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
| Container Max Width | 100% |
432 |
634 |
984 |
| Utility class | Example |
|---|---|
.text-c-1 |
Example |
.text-c-2 |
Example |
.text-beta-shade-1 |
Example |
.text-beta-shade-2 |
Example |
.text-beta-shade-3 |
Example |
.text-beta-shade-4 |
Example |
.text-beta-shade-5 |
Example |
.text-beta-shade-6 |
Example |
.text-alpha-shade-1 |
Example |
.text-alpha-shade-2 |
Example |
.text-alpha-shade-3 |
Example |
.text-alpha-shade-4 |
Example |
.text-alpha-shade-5 |
Example |
.text-dark-gray |
Example |
.text-gray |
Example |
.text-light-gray |
Example |
.text-lighter-gray |
Example |
.text-white |
Example |
| Class | Example |
|---|---|
| Text transformation utilities | |
.tt-lower |
Lowercase text |
.tt-upper |
Uppercase text |
.tt-cap |
Capitalize text |
.tt-none |
No text transformation |
| Font weight and style utilities | |
.fw-normal |
Font weight normal |
.fw-bold |
Font weight bold |
.fs-normal |
Font style normal |
.fs-italic |
Font style italic |
Alignment utilities (these utility classes have breakpoint modifiers, IE: .ta-md-right, .ta-lg-center, etc.) |
|
.ta-right |
Text align right |
.ta-center |
Text align center |
.ta-left |
Text align cleft |
| Font family utilities | |
.bg-c-1
.bg-c-2
.bg-beta-shade-1
.bg-beta-shade-2
.bg-beta-shade-3
.bg-beta-shade-4
.bg-beta-shade-5
.bg-beta-shade-6
.bg-alpha-shade-1
.bg-alpha-shade-2
.bg-alpha-shade-3
.bg-alpha-shade-4
.bg-alpha-shade-5
.bg-dark-gray
.bg-gray
.bg-light-gray
.bg-lighter-gray
.bg-white
| Example | Font size | Line height
(unitless) |
Line height computed
(font-size x line-height) |
Class |
|---|---|---|---|---|
Font size level 1 |
font-size: 4rem |
line-height: 1.2 |
4.8rem
|
.fl-1
|
Font size level 2 |
font-size: 2.8rem |
line-height: 1.4285714285714 |
4rem
|
.fl-2
|
Font size level 3 |
font-size: 2.4rem |
line-height: 1.3333333333333 |
3.2rem
|
.fl-3
|
Font size level 4 |
font-size: 2.2rem |
line-height: 1.4545454545455 |
3.2rem
|
.fl-4
|
Font size level 5 |
font-size: 2rem |
line-height: 1.2 |
2.4rem
|
.fl-5
|
Font size level 6 |
font-size: 1.8rem |
line-height: 1.3333333333333 |
2.4rem
|
.fl-6
|
Font size level 7 |
font-size: 1.5rem |
line-height: 1.6 |
2.4rem
|
.fl-7
|
Font size level 8 |
font-size: 1.3rem |
line-height: 1.2307692307692 |
1.6rem
|
.fl-8
|
Lorem ipsum dolor and a link, consectetur adipisicing elit. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore. Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?
Officia, veniam. Molestias harum quasi, explicabo nesciunt fugit dicta provident natus veniam eveniet eos doloremque dolor, similique voluptates qui adipisci repudiandae iste sit nobis soluta error dolore accusamus fugiat, porro.
| Example | Heading | Font size level |
|---|---|---|
Heading 1 |
<h1> |
Font size level 2 |
Heading 2 |
<h2> |
Font size level 3 |
Heading 3 |
<h3> |
Font size level 4 |
Heading 4 |
<h4> |
Font size level 5 |
Heading 5 |
<h5> |
Font size level 6 |
Heading 6 |
<h6> |
Font size level 7 |
<h1> tag with some trailing textLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h2> tag with some trailing textLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h3> tag with some trailing textLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h4> tag with some trailing textLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h5> tag with some trailing textLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h6> tag with some trailing textLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Unordered list:
Ordered list:
Definition list:
Use .c-list-unstyled or extend %list-unstyled to get an unstyled list. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
Use .c-list-styled to add styling too lists. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Only <ul> and <ul> lists are supported.
Unordered list:
Ordered list:
| .c-btn .c-btn--alpha | .c-btn .c-btn--beta | |
|---|---|---|
| Normal | Button | Button |
| Hover | Button | Button |
| Active | Button | Button |
| Focus | Button | Button |
All buttons when disabled 50% opacity + cursor not allowed
Button ButtonAll buttons when loading 80% opacity + cursor loading
Button Button| Normal | Button Button |
| Hover | Button Button |
| Active | Button Button |
| Focus | Button Button |
“The work uses the DIVA (Dynamic Integrated Vulnerability Assessment) method and the participatory Climagine method, among others, to assess the climate variability and change in the coastal zone. The preparation of the Coastal Plan commenced in January 2013 and is to be finalised in 2015.”
To add a source of the quote add a <footer> or <cite> in the <blockquote>.
“The work uses the DIVA (Dynamic Integrated Vulnerability Assessment) method and the participatory Climagine method, among others, to assess the climate variability and change in the coastal zone. The preparation of the Coastal Plan commenced in January 2013 and is to be finalised in 2015.”
Starbuck
<mark> - You can use the mark tag to
highlight text.
<del> - This line of text is meant to be treated as deleted text.
<s> - This line of text is meant to be treated as no longer accurate.
<ins> - This line of text is meant to be treated as an addition to the document.
<u> - This line of text will render as underlined
<small> - This line of text is meant to be treated as fine print.
<strong> - This line rendered as bold text.
<em> - This line rendered as italicized text.
<b> - This line rendered as bold text.
<i> - This line rendered as italicized text.
Climate change is expected to have severe impacts on coastal areas in particular due to sea level rise. This can cause increase in flood risk, coastal erosion and loss of low-lying systems
Climate change is expected to have severe impacts on coastal areas in particular due to sea level rise. This can cause increase in flood risk, coastal erosion and loss of low-lying systems
Climate change is expected to have severe impacts on coastal areas in particular due to sea level rise. This can cause increase in flood risk, coastal erosion and loss of low-lying systems
Climate change is expected to have severe impacts on coastal areas in particular due to sea level rise. This can cause increase in flood risk, coastal erosion and loss of low-lying systems
We use our own and third party cookies to improve our services and your shopping experience. If you continue browsing, you are deemed to have accepted our Policy on cookies.
Accept