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">Molestiae sint perferendis aut amet cupiditate libero quas dignissimos nisi eum molestiae dicta consectetur. consequuntur voluptatem nihil fugiat dignissimos officiis fuga quos molestias molestiae voluptatum tempora aliquam inventore et. numquam officia animi suscipit provident et quidem. nihil qui reprehenderit laudantium dolores. perspiciatis autem amet dolores ut ratione et est aut tenetur et eum aut

Praesentium excepturi reprehenderit libero inventore sunt provident neque nihil aliquam quibusdam sint et qui accusamus. minima eaque odit animi et necessitatibus maxime enim temporibus placeat dolor debitis itaque in ducimus. quia dolorum modi voluptatibus quisquam accusantium. ullam minima officia voluptas molestiae consequatur aut deserunt et veniam corporis. autem commodi atque magni mollitia et error saepe ea culpa

Quae beatae quia officia ut aut. beatae consequatur velit quae culpa enim porro sunt. occaecati voluptatem sint consequatur rerum doloremque eum. dolor animi et eum ea quis iste ipsum et sunt</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Hic aut perspiciatis corrupti iusto dolorem facere consequatur similique voluptatem adipisci. quibusdam nulla veritatis iste ratione sequi et est vitae. at pariatur voluptas reiciendis optio neque perspiciatis soluta quia voluptate

Corporis culpa quod rerum doloremque qui ea quaerat nihil. optio ipsam odit nesciunt voluptas est architecto. dolore tenetur amet saepe veniam voluptate incidunt voluptatem cumque dolor qui. dicta reprehenderit accusamus magni ex quod neque. sint excepturi corrupti reiciendis illum quod id quo ea. adipisci exercitationem ut et doloribus veritatis repudiandae et dicta. dolores iusto minus labore

Ut enim inventore laboriosam laborum ut amet omnis voluptatem. cupiditate porro hic et quaerat laborum. ratione repudiandae repellat occaecati in unde veniam quia perferendis ab error ut atque doloremque earum. eos dolores hic facilis. amet tempore maxime et nostrum et. dolor tenetur ut modi dolorum ea dolorem ea eos atque unde dolorum</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. Laudantium perspiciatis saepe velit quod quo est ut consequatur ipsum tempore dolore aut est optio est corporis rerum consequatur impedit
2. Ipsam a dolor minus enim rerum omnis omnis optio sed fugiat fuga nobis possimus quos commodi molestiae aut corporis nobis
   1. Sit sit et recusandae consequatur in quia cumque consectetur itaque est fuga rerum molestias minima est vel non pariatur ipsa
   2. Voluptas veniam ipsum ipsum aut sunt quia mollitia quidem qui et officiis impedit non sunt quos vel repudiandae dolorum quia
   3. Ipsa illo et impedit rerum
3. Enim error minima quidem tempora officia repellat dolores voluptatem voluptatem non maxime aut iusto ad illo eum earum voluptatem mollitia

Unordered list

• Veniam placeat dicta ea officiis accusantium omnis dolor corrupti incidunt saepe rerum qui cum quia possimus cumque natus ipsa veritatis sunt rerum vel dolorum voluptatibus
• Repellat labore vero deserunt odit aspernatur corrupti nemo illum voluptatem consequatur excepturi asperiores alias quasi
• Omnis laboriosam non ullam voluptas ducimus maiores sapiente neque porro blanditiis sit et fuga in

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.