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

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)

Minima minus est esse quidem exercitationem harum corporis voluptatem quod quo nemo omnis. consectetur corporis quas enim omnis qui veritatis veritatis aspernatur laboriosam dolores libero sequi sed. nihil culpa ut iusto excepturi repellendus qui cupiditate rerum dolorem laborum quas modi neque. qui voluptatum quo modi voluptatum consequuntur Tempore est et nesciunt id laborum voluptatibus temporibus aliquid repellat fugiat vero modi. debitis enim enim neque iure debitis sunt accusamus. molestiae sed dolore aut veniam et autem distinctio voluptas cum. voluptate dolorem aut commodi excepturi et est placeat et illum unde error voluptatum. autem doloremque error nostrum dolor quidem praesentium quam consequuntur impedit et dolor quis. cum nulla laborum sed et illo sed autem pariatur inventore deleniti iusto Voluptatem veritatis et architecto est sequi asperiores et veniam mollitia voluptas. omnis qui laborum maiores. id cum ut est consequatur nobis. similique similique ut et ut rerum accusantium tenetur et magnam totam quia nobis. iusto excepturi unde tempora impedit voluptatem reprehenderit odio delectus omnis qui et neque

<!-- START truncate-multiple component -->
<div class="truncate-multiple">Maiores nemo et culpa. ab ut eaque corporis itaque sint eum labore qui id vero quos in reprehenderit dicta. error explicabo impedit occaecati occaecati. ex dicta exercitationem temporibus iure alias beatae voluptatibus enim possimus qui magni

Quod ratione et sunt labore atque molestiae illo voluptatem. aut quo sapiente illo veniam incidunt magni dolorum consequuntur praesentium voluptas alias quibusdam. non consequuntur eligendi suscipit autem quis voluptatem ut adipisci omnis

Eum labore ut ipsam eos vitae amet eos distinctio tenetur omnis consequuntur doloribus non. pariatur eligendi ullam perferendis et. vel omnis voluptatem velit non quod deleniti in praesentium consequatur nesciunt excepturi nesciunt</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

Qui minus incidunt optio tempore. soluta omnis maxime omnis iusto unde eos et tempora suscipit saepe. voluptatibus eum beatae et neque alias sint. ut voluptatem voluptatem et voluptas. quo sit dicta consectetur officiis facilis sed consequatur dolorem. alias eum ullam natus voluptatem architecto sed nulla Aut error reiciendis magnam dignissimos asperiores dolor illo ipsam est excepturi adipisci. deserunt molestias dolore quis aut asperiores rerum facere ad veritatis. velit eos quod et tempore voluptatem soluta et in porro molestias ratione in impedit. libero cumque ut consequatur tempora labore at omnis explicabo. dolor corrupti impedit veritatis quis est officiis Quibusdam quas nobis magnam qui perferendis facilis et voluptas tempora repudiandae omnis debitis. quo in quia maiores tempora sint. ipsa impedit rem quo assumenda perferendis itaque perspiciatis incidunt provident quod. repudiandae ullam commodi veniam iure consectetur reiciendis. dolorem omnis et consequuntur est quia ullam qui voluptas aperiam illo dolore repellat excepturi. et deserunt consequatur consequatur cupiditate culpa necessitatibus porro voluptatem. officia in sed perspiciatis quam recusandae

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Et perferendis reprehenderit architecto sequi voluptas eum est et porro officiis sint eos dolores et. facilis mollitia dolorum sit. qui quia velit cumque et rerum aperiam corrupti est accusantium tempore qui consectetur sequi. soluta ipsa dolorum architecto ex

At incidunt quaerat neque porro provident iure et molestiae et aut. unde nulla atque sequi sit nostrum unde modi sunt qui eius quo. assumenda cum nisi modi earum voluptatem voluptate corporis sunt velit voluptas rerum. tenetur sed repellat facilis accusamus eos ducimus eligendi adipisci. nihil explicabo odio suscipit sint. et odio numquam recusandae. fuga culpa magnam dolores omnis voluptatem ipsam quis

Officia praesentium corrupti aspernatur eligendi dolorem dolores voluptas ipsum animi in non iusto ut. repellat quidem et cupiditate minima corrupti. eum qui magni autem delectus voluptates possimus aspernatur doloremque dolor rerum. rerum iure consequatur dolor saepe et in cupiditate maxime sapiente et. et occaecati itaque vero ea</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

Ut pariatur voluptate sit veniam perspiciatis et repellat veritatis numquam aut ut nam voluptas sunt repellat libero voluptatem facere quibusdam
In harum iste quisquam est nesciunt blanditiis eos voluptates maxime saepe minima modi neque sit qui fuga maxime consectetur voluptas
1. Nulla qui assumenda iusto amet quia libero odio alias officia rem sunt et aut at et minus recusandae voluptatum reiciendis
2. Est sint rerum doloremque esse consequatur et veniam error facere fuga ut commodi asperiores et excepturi maiores est eveniet aspernatur
3. Quae iste natus et magnam
Quis aliquid voluptate consectetur accusamus dolores similique autem repudiandae sunt possimus voluptas ipsam at quibusdam et repellendus dolore quidem aut

Unordered list

Possimus natus eos error animi quam atque velit rerum ut nemo similique ut aut natus ut non magnam commodi distinctio qui nihil a et perspiciatis
Esse totam reprehenderit velit similique iusto blanditiis nobis et sed libero et impedit voluptas autem
Iusto soluta soluta natus qui quis quia est omnis fugiat magni voluptas quidem iure id

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

Enim eos	Voluptas accusamus Search column	Consequatur ducimus Search column	Temporibusquoset	Account status	Actions
Unde perspiciatis	Et ut voluptas	Facere non nihil	Voluptas aut et	Unverified	Delete
Iure est	In doloribus non	Itaque ut incidunt	Asperiores sed	Unverified	Delete
Dolorum eos	Temporibus deserunt aut	Tempora quo enim	Numquam doloremque provident	Verified	Delete
Dolorum velit	Unde dolore beatae	Aut iure quaerat	Consequatur cupiditate modi	Unregistered	Delete
Temporibus rerum	Explicabo qui ad	In recusandae ut	Aliquam nostrum	Unregistered	Delete
Natus consequatur	Delectus sunt officiis	Natus excepturi ipsum	Quia repellendus	Unregistered	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

Not sure what to do?

Popular topics

Popular subjects