CSS Styling Guidelines
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Buttons
Accordion
Please consider using the Showcase App for Accordions.
- Question 1
Answer 1
- Question 2 Answer 2
- Question 3 Answer 3
Tabs
Tabs are only available on TK1026 and above and DC 7 and above.
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
Testimonial
-
There are people out there that work for money and some might provide honest service but others will take advantage of situations while concentrating on the bottom dollar. Johnny is not one of those people! His passion to help out is very evident in his actions. He will go above and beyond to make sure you get the best for the least while making the process seamless. Efficient and a great listener! I would be sorry for you if you have not met Johnny before you got your mortgage. Thank you Johnny from all of us what you did for us will always be remembered.
Callouts
class="callout"
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
class="callout calloutLeft"
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
class="calloutWhite"
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
class="calloutPrimary"
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
class="calloutSecondary"
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
class="calloutSuccess"
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
class="calloutAlert"
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Full Width Rows
class="bg"
Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.
Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.
class="bg bg--primary"
Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.
Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.
class="bg bg--secondary"
Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.
Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.
class="bg bg--success"
Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.
Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.
class="bg bg--alert"
Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.
Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.
Some class names to use:
On the row:
| Class name | What it does | Value |
|---|---|---|
| centre, center | Centres all content in row. Can also be used on elements. | |
| bg | Adds a background colour (default is light grey) | |
| bg bg--primary | Background colour | |
| bg bg--secondary | Background colour | |
| bg bg--success | Background colour | |
| bg bg--alert | Background colour | |
| padding-top-sm, padding-bottom-sm, padding-top-none, padding-bottom-none | Changes top or bottom padding |
On the column:
| Class name | What it does | Value |
|---|---|---|
| callout | Adds a background colour, padding to a column and centres the text | |
| calloutWhite | Adds a background colour, padding to a column and centres the text | |
| calloutPrimary | Adds a background colour, padding to a column and centres the text | |
| calloutSecondary | Adds a background colour, padding to a column and centres the text | |
| calloutAlert | Adds a background colour, padding to a column and centres the text | |
| calloutLeft | Makes the text left aligned. Can be added to any callout style. |
On ul:
| Class name | What it does | Value |
|---|---|---|
| col (NOTE: if the list is not actually a list of items and this is just being used for presentation, please add role="presentation" to the ul) | Turns a list into columns | |
| col col--2 | Sets number of columns | Two columns |
| col col--3 | Sets number of columns | Three columns |
| col col--4 | Sets number of columns | Four columns |
| col col--6 | Sets number of columns | Six columns |
Wildcards:
| Class name | What it does | Value |
|---|---|---|
| centre, center | Centres content |