CSS basic elements

The purpose of this HTML is to help determine which default settings are used within the CSS, and to make sure all possible HTML elements are included when designing a site.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Lorem ipsum dolor sit amet, link adipiscing elit visited link lorem ipsum strong sit amet, emphasis consectetuer adipiscing elit.

Highlighted paragraph consectetuer adipiscing elit. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Truncated text

You can limit text to one line and add an ellipsis by adding

class="truncate"

Truncate applied to a div

<!-- START truncate-text-div component -->
<div class="truncate">A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.</div>
<!-- END truncate-text-div component -->

Truncate applied to a paragraph

A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.

Truncated text (multiple lines)

You can limit text to multiple lines and add an ellipsis by adding class="truncate-multiple" to a block-level element.

The default amount of lines the text will be truncated to is 2, if you would like to change this amount add an inline style attribute to the element setting the custom variable --truncate-multiple-lines to the desired number.

Multiple line truncate (default)

<!-- START truncate-multiple component -->
<div class="truncate-multiple">Ratione eum ut sint expedita. odit aut omnis temporibus neque nam quia omnis autem maiores et et qui temporibus quisquam. odit autem minima quis delectus odit ducimus aut sed nihil rerum eos ab. rem facilis quisquam eius quos alias consequatur distinctio et dolor non sunt. deleniti nisi sunt voluptas molestiae laudantium perspiciatis amet quas dolor sequi dolore. nobis sint atque qui ratione incidunt corrupti nihil placeat ut vel molestiae eius

Officiis quae nobis ipsam sunt aut et ipsum aut deserunt sed inventore ratione perferendis. in voluptas sit odio delectus et vel reiciendis numquam neque quo error non ut. aut qui pariatur deserunt. voluptas velit est libero unde incidunt qui amet at nihil asperiores mollitia voluptatem soluta. exercitationem ea id nesciunt inventore voluptatem distinctio nesciunt id. similique aut sunt at molestiae eveniet excepturi qui architecto dolorem quia saepe et culpa et

Inventore minus aperiam temporibus magni fugit sequi. est distinctio eius tempore distinctio sequi voluptatem sed id et velit dolorem. assumenda quisquam quam ut libero harum laboriosam eum. voluptatem ut et nesciunt eaque soluta dolore tenetur temporibus vitae ratione commodi repellat omnis</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Maiores ullam rerum porro. commodi eligendi ut perferendis amet in consequatur autem consectetur sed fugiat. ducimus in quaerat culpa vero eaque et eos qui. est nemo commodi voluptas libero et et expedita minus dolor enim rerum quo labore. voluptatem et facere nisi

Cupiditate doloribus minus consectetur magni assumenda placeat nemo sed assumenda non ratione maxime. ea vel accusamus aut illo ut magnam quae et corrupti aliquam harum atque dignissimos. deleniti voluptates tempore sint laudantium porro non deleniti eum laboriosam est voluptas vitae minima. et quasi nam architecto suscipit quia corrupti ullam iure. quia odit expedita molestiae ut aut minima ad accusantium in recusandae nihil esse voluptas. debitis accusamus sed qui mollitia voluptatem beatae eum velit expedita

Est qui exercitationem excepturi sit. rerum vero minima iste et. enim temporibus similique ex tempore. quidem non in reiciendis blanditiis dolor culpa qui rem maxime error blanditiis fugit. ut necessitatibus aut impedit. voluptates eos in et non reprehenderit accusamus officiis a recusandae aut sit dolorum. dignissimos omnis id et illo labore</div>
<!-- END truncate-multiple component -->

List types

Definition list

Definition list title 1

Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Definition list title 2

Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonumm.

Definition list title 3

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Ordered list

1. Ut dolores non quia aliquam fugit ut unde consequatur deserunt a quos unde quod omnis et eum culpa modi est
2. Velit consectetur cumque itaque maxime maxime eum animi dolorem eos dolorem molestiae recusandae voluptatem inventore quia cum ducimus et pariatur
   1. Mollitia sed quas laborum amet aut iure ut cupiditate perferendis ut illum eaque aut magnam dolores et similique aut aut
   2. Numquam qui eligendi quidem eum ducimus quod corporis deleniti ipsa nisi qui adipisci aut ut voluptates tempore dolorum eius unde
   3. Culpa vero unde veniam commodi
3. Porro consequuntur aut voluptas neque expedita error deserunt et minima nostrum vitae reiciendis quia minima omnis consequatur dolorum eaque repellat

Unordered list

• Enim ut veritatis aperiam quia unde sunt repellat nobis debitis aperiam rerum rerum id optio libero quis aut rerum ut mollitia id eius quos voluptas
• Accusamus tempora officia eius eum animi ullam aut sapiente optio saepe quos velit et est
• Rerum esse harum eum sequi incidunt sit animi exercitationem eligendi quia enim omnis perspiciatis enim

Newspaper style vertically ordered list

• Applying for courses
• Agriculture, horticulture and veterinary studies
• Area studies, languages and literature
• Arts and crafts
• Business and management
• Construction
• Education
• Engineering and production
• Environment
• Family and personal care services
• Food, leisure and hospitality
• Humanities
• Information technology
• Librarianship
• Media studies
• Medicine and health studies
• Science
• Social sciences
• Teaching
• Transport

Tables

Misc - abbr, acronym, pre, code, sub, sup, etc.

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. 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. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, 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. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  AVE

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.
- Blockquote

Lorem ipsum dolor sit amet, 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.