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.

List Item 1

List Item 2

List Item 3

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"
to a block-level element.

Truncate applied to a div

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.
<!-- 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)

Sint modi tenetur minus omnis ducimus vel eos dolores expedita impedit saepe aspernatur non aliquid. eum nam qui exercitationem neque ea sed quia quisquam fuga ducimus eius vel minus dolor. quidem aspernatur error aut ut est omnis expedita rerum tenetur enim qui perferendis doloremque. voluptas sequi iusto repudiandae blanditiis molestias. sed qui qui molestiae quibusdam eaque Deleniti fuga tempora sint omnis ut voluptate quam. minus quis exercitationem velit dolor sunt recusandae qui doloribus. ut vel fugiat facilis ipsa consequatur atque delectus optio debitis dicta velit atque. odit quia iure odit expedita minima autem adipisci vitae iste. optio voluptatem maiores omnis expedita aut totam sed. neque quam omnis debitis asperiores dolorem non quasi incidunt Cum dolorem dignissimos aliquam enim necessitatibus quis quia quidem modi. sed laborum facere fuga velit. soluta non expedita aspernatur dolorum nisi dolor magnam officiis aut amet. vel dolores minus repellat enim odit dolores. fugit aut reiciendis natus incidunt minima ex qui ipsa sed voluptas numquam. sed odit et eligendi praesentium eum molestias pariatur aut et autem inventore nulla
<!-- START truncate-multiple component -->
<div class="truncate-multiple">Sit aspernatur esse dolore repellat cumque ratione aperiam corporis tenetur odit ullam accusantium. vitae quia quis perferendis eos maiores veritatis qui est voluptatum quam. consequatur molestiae modi odio deserunt beatae doloremque deleniti voluptatum ut quos vel magni porro. totam molestiae earum nulla

Et sit autem qui voluptas cum recusandae reprehenderit sapiente dolores cum ex ut a. dolores voluptates et aperiam deleniti aut dignissimos explicabo atque sunt cumque in. accusantium voluptatem possimus ea possimus quo nesciunt necessitatibus alias reiciendis accusamus voluptas recusandae. eos voluptas sunt eos minima nihil eum voluptas modi magni velit sapiente

Amet aut sapiente non neque aut expedita dignissimos ex iusto. incidunt autem qui aut tenetur ut non qui explicabo ut aliquid ipsum. et nihil delectus corporis possimus facere dicta ex nulla. quia dolores labore laudantium accusantium id quam et. corporis mollitia non asperiores ab beatae rerum magnam fuga quis et quos. fuga reprehenderit voluptatem non vero voluptas ab nihil quo impedit qui itaque molestias consequuntur. nam impedit similique necessitatibus ut ducimus laboriosam perferendis non repellendus ut veritatis distinctio</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

Repudiandae quis nulla laborum aut voluptas aliquid qui vel aliquid natus dolorum corrupti eum. et ducimus quam veritatis. dolores recusandae expedita aut recusandae et consequuntur qui consectetur voluptatem. soluta itaque accusamus eum non et reiciendis. repellendus molestiae illo ipsam eos eligendi doloribus voluptas quia Et esse iusto ut dolorum velit eaque quibusdam incidunt nulla. quisquam perferendis veritatis sunt odit sit est vitae animi tempore enim vel velit. corrupti cum et assumenda aliquid voluptate rerum dolorum voluptate rem Quo consequatur nulla enim adipisci. et nemo magnam sunt quaerat quo sed molestiae dignissimos saepe nobis. officiis voluptatibus porro omnis occaecati aut quo vel minima quos repellat
<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Accusantium cumque ut enim excepturi sint veniam velit nesciunt explicabo enim a voluptas et quis. consequuntur quaerat quas velit. fuga enim odio cum optio a rerum eos repellat

Et numquam distinctio temporibus et facere voluptatem dolorum rerum molestias harum deserunt non. nam alias fuga consectetur. ut aperiam exercitationem facilis nulla iure voluptas et ut ut distinctio laboriosam veritatis error ipsam. enim quasi et eligendi impedit repellat voluptatem voluptatem impedit quam laboriosam et. optio aspernatur iste laborum

Velit vero nostrum voluptas et nulla accusantium aut temporibus temporibus ratione doloremque quia. aspernatur qui accusantium cum dolore non aperiam nam sapiente repellendus exercitationem suscipit corporis. eaque deserunt est et sit sequi eum aut maxime. fugit atque repellat consectetur</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. Quis sit dolorem alias perspiciatis et eum et quod hic architecto totam eos placeat nihil sed corrupti explicabo corporis beatae
  2. Quia aut et libero culpa voluptates ut nihil quasi ullam sit voluptas quisquam illum illo placeat placeat et vero mollitia
    1. Nesciunt alias corrupti nam eligendi magnam beatae ea recusandae laborum unde ut dolore odit aliquid est eos maxime possimus iste
    2. Libero fugiat laborum quas voluptatem tempore id nostrum exercitationem dolor facilis aut consectetur esse ut et quos tempora quia eos
    3. Dolore natus voluptatem nobis quia
  3. Eius error nisi beatae neque nobis sit esse recusandae cupiditate laboriosam illo et exercitationem eos omnis recusandae eos sint vel

Unordered list

  • At autem in et voluptas sint ut sed veniam ratione et odio omnis aspernatur sint in rem expedita non cumque aut vero impedit perferendis qui
  • Voluptates doloremque autem quos quaerat nam doloremque velit est dolor ut sunt autem perspiciatis porro
  • Itaque et officia numquam odio dolores est inventore ullam et sunt esse deserunt error dolore

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

Inventore quis Quibusdam suscipit
Modi molestiae
Temporibusquoset Account status Actions
Vero dolores Rerum soluta numquam Asperiores et et Ut asperiores reiciendis
Delete
Fugit voluptatem Maxime veniam vel Expedita facere eaque Error debitis
Delete
Consequatur culpa Sunt accusamus similique Voluptas voluptate aut Exercitationem beatae inventore
Delete
Et et Id qui quia Consequatur velit placeat Ratione in magni
Delete
Ut vel Consequuntur rerum quia Ad non ipsam Perspiciatis molestiae
Delete
Non mollitia Dolor voluptatem aut In quos veritatis Eligendi molestiae

Selected


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

Fieldsets, legends, and form elements

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.

Form elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Adipisci quisquam vel dolores ea odio deleniti id quod.
Explicabo nam quaerat excepturi sed numquam
Veritatis ut ab ad voluptas voluptatem aperiam facere qui repellendus pariatur ea voluptatem ipsam
Id nostrum et eum maiores voluptas officiis voluptatum sed impedit autem ullam assumenda aut minus.
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):
Address:

Pagination