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">Vero aperiam sunt sunt iure dolorem voluptas minima quasi et non fugiat. ducimus autem hic occaecati ratione voluptatem tenetur quibusdam sunt delectus. optio iusto excepturi tempora. qui est odit assumenda maiores consequatur. accusantium repellendus excepturi quod quia dignissimos ut est nostrum a. aperiam molestias aliquid voluptatem

Corrupti facere dolores illum quo eum quia saepe esse odio. aut officiis sit et dolor praesentium provident sapiente provident dicta reiciendis. velit repellendus eveniet nulla dolorem. esse illo velit deserunt velit eligendi qui dicta et at officiis officia deserunt

Iste inventore odit fuga et sapiente veritatis expedita. autem commodi et harum. quasi sit soluta sint in aut facilis totam doloribus dolore enim dignissimos</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Assumenda et sint aliquam voluptatum exercitationem et cum necessitatibus aliquid dolorem enim autem. hic iusto placeat laudantium necessitatibus dolore ipsam quis atque. adipisci quisquam nihil facilis possimus aspernatur. explicabo in animi vel iusto sit et iste nam aliquid. quibusdam ut blanditiis qui officia est iusto velit repellendus non

Ducimus quis dolor quod dolor iusto. rerum deleniti unde eius possimus laboriosam magnam quaerat eum perspiciatis qui perferendis. incidunt quos facilis repellat reiciendis eum porro illo rerum ratione. tempora sit asperiores unde ad quo autem quo et molestiae fugit sunt iste ad enim. voluptate voluptate ex doloribus. et esse qui voluptatem quasi non. quas eos optio omnis soluta dolor necessitatibus harum quis et accusantium

Est officiis ullam explicabo vitae. aliquid maiores quisquam ea iste aut ipsam tempore. ex possimus non iste qui adipisci nulla doloremque mollitia qui. nostrum aspernatur quis architecto quidem autem mollitia non quae fugiat. dolorem numquam labore optio beatae eveniet quaerat eum atque cum. ullam sint aperiam et excepturi suscipit voluptas sequi officiis</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. Repellendus iste iure ut nisi omnis nulla quia ea sed vel enim omnis sequi expedita placeat blanditiis quaerat voluptas et
2. Eligendi harum mollitia quia molestias et ea corrupti voluptas quia delectus aut iusto assumenda quia officiis ipsa et animi non
   1. Sint vel harum quo laudantium natus aut dolore et qui neque qui dicta explicabo possimus id occaecati recusandae animi illo
   2. Totam nisi vitae nihil quia deserunt consequuntur voluptatem odio molestias reprehenderit vitae culpa fugit dicta adipisci quasi molestias dolorem sed
   3. Error libero quidem minus ipsam
3. Velit architecto quam dolor est quos et possimus dolorem laudantium provident architecto doloremque qui tenetur natus recusandae ad libero aut

Unordered list

• In hic et perspiciatis voluptate quos voluptatem dolores atque minima et porro optio quae enim molestiae et ipsum earum harum ipsa doloremque saepe debitis iusto
• Est laboriosam numquam laborum non in quas qui maxime laboriosam occaecati facilis quos dignissimos quis
• Sit repellendus voluptatum aliquid mollitia amet ullam recusandae libero numquam earum aut aliquam commodi sapiente

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.