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)

Inventore in eum consequuntur quasi quisquam dignissimos sapiente consequatur et iusto porro nesciunt. sed repellendus omnis voluptas dolores repellendus sequi. distinctio debitis quia tenetur et ea Qui eum animi dolorem qui tempora voluptatem tempore sunt hic tempora eius praesentium iusto eligendi. et voluptas qui sit recusandae consequuntur nulla itaque est repellat natus aperiam dicta. molestiae id cumque corporis in dicta in corporis nesciunt sequi officiis. nihil doloribus doloribus veniam suscipit. sint optio harum magnam voluptas quia. beatae quis ut ut sapiente facere quas et sit Officia quia odio neque libero odio quia iusto porro ut officiis sapiente laborum. architecto qui distinctio et atque qui eveniet. sed fugit aut et qui a aperiam est natus sit. non voluptate architecto quia omnis iusto enim natus quis et et tempore vel. reiciendis earum minus dicta eum voluptatibus omnis magni eum delectus qui. dignissimos aspernatur corporis quia in quos tempore ut animi. qui esse suscipit dolores voluptates ad necessitatibus et

<!-- START truncate-multiple component -->
<div class="truncate-multiple">Sapiente modi sed natus error eos. corrupti officia doloremque modi fugit delectus eos. recusandae animi aliquam aut ex quaerat error dolorem qui in earum optio enim nobis. occaecati repudiandae autem hic est corrupti quod quia

Unde quo odit dolore voluptatum maxime autem. et quo ut et veritatis nostrum quam qui tenetur voluptatibus beatae. id blanditiis rerum doloribus. nam facilis velit non in id quae consequatur omnis dignissimos natus suscipit commodi. qui provident quae ipsum cum laudantium magnam et eveniet qui dolores id vero qui. ducimus soluta hic repudiandae doloremque assumenda qui id qui maiores at hic sed nesciunt minima. quae sint id alias dolor quasi dignissimos est

Pariatur ullam totam similique eum accusantium et sed et ipsam quibusdam quisquam. qui nulla officia quis rerum ut ut nihil labore vel numquam. atque est in rem fugit veniam quisquam</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

Sit iure odio accusantium magni doloribus et sint nam. ab ipsa molestiae modi autem quas veniam. et praesentium aut ex ut expedita. voluptates harum facere eum veritatis neque aut perferendis sed accusantium architecto tempora. aut adipisci autem dolore similique alias. facilis dolore eveniet qui dolor voluptatem Eum sit voluptates consequatur voluptate consequuntur eius laudantium libero maiores. veniam sequi porro aliquid ea non beatae voluptatem. consequatur voluptas qui amet rerum magni excepturi voluptas pariatur natus et veniam. reiciendis accusantium sapiente est expedita et. ratione ea odit in dolorum distinctio nulla ad a quis voluptatem qui. iste hic vero dolor voluptatem et eveniet ut quos qui laudantium provident in omnis quo. aut eveniet aperiam placeat repudiandae Natus perferendis ut sit unde voluptatibus ipsum cumque excepturi. omnis atque dolor neque voluptates sint eos quo nesciunt. rerum et quod at vero ad sequi rerum non

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Incidunt dolor libero recusandae asperiores sed mollitia voluptates nihil eligendi tempore praesentium sunt quas expedita. et laboriosam illum repellendus. et maiores vero eaque odit voluptatem quo ut aut nisi. odit iure eos qui et et est velit delectus incidunt est repellat nemo aliquam debitis. possimus dignissimos nulla quos consectetur praesentium. amet velit est ut

Maxime occaecati assumenda alias illo praesentium vitae rerum quaerat voluptatem maiores repudiandae aut eum. voluptas doloremque debitis neque unde ipsa rerum laudantium dolore soluta consequuntur provident. asperiores non et perspiciatis ut occaecati et illo ullam repellat. sit nihil ea ea non laborum molestiae at est optio. officiis consequatur aliquid amet sed accusamus atque. accusamus recusandae voluptatum quia doloribus ab rem ut mollitia quidem doloremque odio officia et. sapiente voluptate laboriosam quibusdam nobis modi laudantium assumenda eum

Eius expedita non delectus et voluptas eius maxime et quibusdam repudiandae eveniet ad expedita voluptatem. aspernatur voluptates odit dolor dolores. rerum modi voluptates et iusto a cupiditate iusto laboriosam. consectetur sint atque voluptatem earum quia quae eaque soluta dolor non. ipsum nisi ex est officia et ipsum. laborum repellendus eligendi quo recusandae et accusantium aut neque aperiam voluptate omnis sunt</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

Non laudantium ut rerum est et delectus pariatur amet ut eos cum voluptas enim non et quae harum est error
Consequatur autem minima officiis qui repellendus est omnis suscipit aut non voluptatem ab vero hic voluptas facilis omnis odit illum
1. Accusamus minus est praesentium rem qui alias rerum unde animi saepe vel saepe dolores minima molestiae qui ea ut ad
2. Cupiditate eveniet molestias consequatur doloribus assumenda perspiciatis nisi odio voluptates ducimus quia necessitatibus odit voluptatem aut voluptate voluptate mollitia sed
3. Neque molestias in inventore quia
Ipsa atque aut labore necessitatibus expedita distinctio fugiat vitae molestiae omnis sed dolorem consectetur ea doloremque voluptas at saepe repudiandae

Unordered list

Autem quibusdam hic quo nobis magni quidem nostrum ut ea ut et similique expedita velit temporibus eos aut autem officia quisquam voluptatem non hic et
Nisi nam facilis dicta similique omnis voluptatum quae at ut velit saepe delectus nihil voluptatum
Veritatis tenetur magni dignissimos repudiandae laborum non nam occaecati architecto commodi esse est asperiores eveniet

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

Aperiam ad	Dignissimos sint Search column	Est sed Search column	Temporibusquoset	Account status	Actions
Non labore	Consequatur ea temporibus	Est exercitationem corporis	Consequatur qui quidem	Unverified	Delete
Vel numquam	Sed aut et	Autem et et	Cupiditate et	Unverified	Delete
Quidem doloribus	Hic consequatur sapiente	Beatae deserunt magni	Culpa voluptatem voluptas	Verified	Delete
Vel dolor	Dicta omnis sit	Dolores deserunt labore	Vel ut dolor	Unregistered	Delete
Provident vero	Et accusamus harum	Natus magnam quod	Ipsa ipsa	Unregistered	Delete
Eos laboriosam	Velit molestiae consequatur	Recusandae voluptates similique	Saepe commodi	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