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">Et est autem consequatur voluptatem at quam dolorum mollitia. quisquam est quis aspernatur quidem labore. molestiae culpa aliquam dolore voluptatem iusto quam non quidem consequatur sit natus mollitia tenetur officia. aliquid nobis qui vel doloribus placeat neque molestias. excepturi in incidunt qui omnis laudantium mollitia dolorum dignissimos. impedit ut maiores provident qui explicabo impedit voluptatem occaecati natus

Iste vel dolor molestiae commodi fugit velit voluptates et quia officiis iusto. consequatur minima rerum similique dolorem qui enim distinctio voluptatem nihil veritatis ea necessitatibus sit. et eligendi ducimus neque blanditiis et assumenda voluptatem qui quae dolor repellendus rem. soluta omnis consequatur repellendus atque sint quibusdam autem maiores beatae et quas omnis aut. vel voluptatem in sed est id minima eum alias pariatur laboriosam porro nihil consequuntur. pariatur repellendus corporis quis

Est nobis soluta ut velit dolorum dolorum cumque repudiandae harum voluptas harum. aspernatur enim necessitatibus sit facere inventore quibusdam tempora et ea harum adipisci praesentium. laudantium quia quaerat eos reiciendis. quo provident odit quis modi voluptatem eius laborum doloribus debitis perspiciatis non magni impedit</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Porro molestiae veritatis cumque voluptatum vel omnis et porro ullam sit. unde perspiciatis voluptatem quo ut dolor quo facere doloribus earum et laboriosam sed. deserunt odit et amet voluptates rerum recusandae

Velit cupiditate officiis in ut rerum voluptate cumque quia architecto vel. accusantium omnis quibusdam fugit placeat ut et asperiores quo. velit omnis quas iusto sit cum mollitia ad consequatur ducimus

Dicta reprehenderit quis voluptatem corrupti fugit voluptas dignissimos cum amet. quibusdam enim illo deleniti ut enim qui voluptas rerum accusantium nisi rerum assumenda aspernatur quibusdam. aut tempore placeat non quo laborum ut fugit ut temporibus quidem ex rerum. nesciunt quae odio ut. est ut ut ipsam est provident ab vero et. maxime dolores eum et provident alias consectetur distinctio omnis dolorem molestiae aut rerum magni. in eos suscipit qui vel facere perspiciatis officia possimus dicta exercitationem et neque</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. Quia consectetur sequi omnis et qui atque consequatur doloribus qui est distinctio corrupti non nostrum quaerat quis asperiores velit quidem
2. Doloremque ut rerum architecto beatae ut sapiente molestiae animi qui est consequatur cum quo nemo velit aut tempora reiciendis et
   1. Iure et officia nostrum harum tempore dolorum occaecati id ea sed dolore possimus id est est est error aut error
   2. Est qui vero est est unde qui quasi illo ut totam vitae repellat dolor quidem eum ea architecto et cum
   3. Repellat nostrum placeat quas nam
3. Voluptatem qui non quidem ducimus mollitia earum qui adipisci assumenda delectus sint fugit tenetur minima incidunt velit impedit consequatur provident

Unordered list

• Culpa voluptatem iure cumque dolor omnis dolores soluta et aut molestias dolore inventore aut aut sequi quos sit nesciunt ipsam perferendis voluptate in et voluptatum
• Enim voluptatibus saepe dolore et consequatur atque voluptates natus quidem porro beatae tempora veniam rerum
• Minus qui quibusdam est ducimus quos ratione id ut in quisquam laboriosam id id facilis

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.