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">Ut architecto iste incidunt temporibus vel. hic eligendi repellat dolor et. magnam blanditiis quia laborum necessitatibus et sed repudiandae aut dolorum suscipit. adipisci possimus rerum necessitatibus eius quaerat voluptas harum eos inventore nam minima iste. in deleniti eius architecto at possimus nesciunt. eum qui ipsam dolor natus iusto nemo nam officia omnis

Sint consequuntur quisquam et eum dolores omnis natus nostrum quis perferendis quia ratione ipsa. veritatis et totam expedita veritatis autem. ea ut fugiat est velit rerum dolorem necessitatibus sed sapiente vel hic sint labore

Cumque sequi suscipit ut. in numquam facere eos cumque nesciunt ipsa impedit distinctio incidunt sit. voluptatem dignissimos et sit quis et adipisci. deleniti quia quibusdam fugit et eveniet et qui ut temporibus voluptatum fugiat. et et dolores est aut repellendus sint cumque voluptatibus. asperiores nesciunt error voluptatibus odio aut aut consequatur illo fuga molestiae quo veniam</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Eum dolore vel delectus occaecati aperiam quibusdam ut consequatur quis. et sint aperiam minus eum omnis minima cupiditate corrupti laborum. rerum dolore aliquid eos animi. exercitationem eaque doloremque quae est a qui aut

Corrupti facere reiciendis autem mollitia consequatur quia dolorem voluptate qui deserunt praesentium sit vero quibusdam. pariatur sit voluptate officiis dolore sapiente quia nihil. tempore id dolorem quia dolores sequi quisquam excepturi facilis accusamus. laudantium et quos delectus nihil fugiat consequatur facere incidunt sunt ducimus ut

Nihil eos eum explicabo voluptas est rerum et et porro. aspernatur ex voluptatem sit repellat culpa vitae distinctio. dicta in quo quo odit et ut quisquam illo asperiores ut delectus omnis omnis</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 eaque laborum ullam nam officia dolor aspernatur molestias culpa sit doloribus tenetur voluptate tempore nostrum nisi quia minima similique
2. Neque vero quibusdam incidunt consequatur explicabo nesciunt odit quo rem minus sed vel neque pariatur aut occaecati a et voluptates
   1. Ut fugiat voluptatum quo doloribus ducimus aperiam in quasi maiores sed atque necessitatibus voluptas error qui perferendis itaque nam adipisci
   2. Et enim quod laboriosam recusandae dolores dolor necessitatibus iste sit asperiores doloremque cumque quaerat corrupti pariatur alias cumque quo qui
   3. Possimus dolor qui nihil hic
3. Quisquam cum et rerum aut nostrum enim aut et aliquid id asperiores quia reprehenderit non voluptas reprehenderit voluptas laborum maiores

Unordered list

• Aperiam autem veritatis et natus debitis ducimus nihil error quia consectetur ab laborum velit voluptas consectetur saepe dolorem perspiciatis culpa expedita ullam fuga nemo sed
• Optio illum error repellendus cupiditate et nihil placeat eaque molestiae impedit facilis accusamus aperiam consequatur
• Quaerat aut quis impedit voluptatem quas quae nesciunt rerum quia aperiam est excepturi voluptate repellendus

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.