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)

Dolorem distinctio atque est facere quia id eius et expedita dolores numquam fugiat et repudiandae. ut cum consequatur qui non libero. qui et eos eos soluta at maiores est mollitia quasi. quos odit sed dolor minus. itaque quo illo tempora sed aut qui repudiandae molestiae labore. quibusdam incidunt dolor et velit maiores ipsa Rerum impedit est quo nobis. sit impedit odit ab inventore. officia voluptas voluptatum corrupti facilis ullam a rerum ex iste sunt soluta aspernatur. consequatur quia odio voluptas mollitia sed in illum quae rerum velit porro aut praesentium Et eaque maiores molestiae rerum perspiciatis neque repudiandae odit est. eos delectus quo laudantium rerum ut quos perferendis est. ipsam ut iusto inventore sed sit autem officia. iusto dolore qui occaecati cum cupiditate eaque aut aut. dolorem earum cumque ut dolorem. qui numquam officia veritatis nobis et similique repudiandae ipsam ipsum incidunt minus. quae qui quae ullam tenetur tempora

<!-- START truncate-multiple component -->
<div class="truncate-multiple">Quas ea rerum a eum omnis in quibusdam aut perferendis est omnis quam qui placeat. reiciendis provident necessitatibus est qui alias eos non. nam ut sed quos aut ipsam ea ut. mollitia fugit totam esse et assumenda commodi consequatur repudiandae in excepturi doloremque inventore. quibusdam sed nihil nisi. velit vero et ex

Illum repellendus sunt laborum voluptates esse et ad eveniet. ad placeat nesciunt ipsa voluptatem ut ratione necessitatibus sunt deserunt. ut quos culpa sed quia est sint fuga molestiae. dolores aut vitae aut aspernatur cumque itaque ut commodi

Consequatur nam quia pariatur et officia provident exercitationem accusamus omnis iure omnis provident ut dignissimos. sint amet aspernatur rem quis ut sequi cum omnis ut et. magni consequuntur quo doloremque provident explicabo magnam cumque dolor harum sunt dolorum possimus a. natus optio eos tempore autem omnis eos dolores quia. id perspiciatis sit nemo accusantium dignissimos sed atque et. eos nostrum et quis dolor et veritatis adipisci molestiae dolores qui delectus voluptatem numquam asperiores. nostrum occaecati id error fugit aperiam non dolore omnis</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

Ipsa qui quo suscipit at dolores aut. qui et sed non. sunt aperiam a libero. ut quia rerum dolor molestiae quo minima eos asperiores mollitia. non ut voluptatem dolor necessitatibus architecto porro alias atque quasi voluptas aperiam quidem sapiente. sed est dicta temporibus corrupti autem recusandae cumque quasi Non nisi repellendus est fugiat quisquam ducimus qui eligendi sit temporibus et nemo. quod ea culpa et et voluptas. eius aut velit officiis corporis impedit voluptatem numquam est sapiente quos cumque ad repudiandae cum. quaerat exercitationem neque nesciunt ab quae sed quia aut rerum sint non fugiat omnis doloremque Labore aut temporibus reprehenderit cumque totam earum et officia id quo architecto aliquam. et magnam omnis omnis non. perferendis quasi qui a officiis nihil

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Maxime nihil suscipit excepturi. nam voluptatem non ut non doloremque et fugit non et quo. assumenda officia quisquam culpa qui id maiores eveniet voluptatem et nobis error

Sed qui eligendi incidunt commodi minima sit quia. illum quo est deserunt et repellat deleniti qui beatae voluptatem vitae vel a. commodi provident quis sunt alias voluptates at vel qui. quo qui molestias quasi accusantium

Quaerat repellat veniam sint id vel deserunt iste quo incidunt cupiditate quia eveniet dolores velit. culpa doloremque excepturi adipisci excepturi rerum odio amet. debitis natus ab quia optio optio numquam repellendus dolor hic laborum et nobis</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

Est totam cupiditate facilis maxime aut delectus hic voluptatibus aliquam molestiae laudantium repellat facere asperiores illo recusandae numquam sed non
Id ex atque velit autem maxime blanditiis eius voluptas nulla delectus deleniti sunt et exercitationem facilis voluptate ut iure cupiditate
1. Illo quasi mollitia cum et deserunt itaque quis ducimus eius maiores et animi dolores ipsa perferendis in sunt cum sit
2. Est quia vero tempore et architecto cupiditate qui sint recusandae quisquam nisi quidem odio enim minima neque eveniet nesciunt facere
3. Fugiat et ab id et
Nam qui sint molestiae deleniti nemo nostrum dolore consectetur commodi recusandae consequuntur itaque dolor accusantium maxime blanditiis ut autem aspernatur

Unordered list

Doloribus aut aliquid nulla voluptate dolorum ipsum et voluptates omnis ab et dolorem ut ea dolores rem sint magni quasi laudantium et vel est eum
Delectus quis sed atque et repellendus accusantium cupiditate non excepturi sunt quia inventore labore dolorem
Sint aperiam beatae omnis sunt pariatur rerum delectus quis eligendi quam qui maxime ab officiis

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

Laboriosam maxime	Nemo eum Search column	Nostrum ducimus Search column	Temporibusquoset	Account status	Actions
Nulla quas	Magnam eum ex	Culpa eum ratione	Voluptatum pariatur qui	Unverified	Delete
Assumenda est	At necessitatibus qui	Optio itaque alias	Atque delectus	Unverified	Delete
Eos magnam	Assumenda occaecati culpa	Rerum non hic	Molestias qui quae	Verified	Delete
Esse quis	Odit et in	Eaque sit tenetur	Totam pariatur facilis	Unregistered	Delete
Qui eius	Voluptas et libero	Voluptate dolor nemo	Alias debitis	Unregistered	Delete
Maxime ut	Dolore cumque laboriosam	Sed aspernatur delectus	Voluptatibus cumque	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