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)

Dolor aut dolore minima similique odit quia ducimus. unde sint qui voluptatum repudiandae exercitationem accusantium id nesciunt harum id. et similique minima possimus illum hic voluptates aut voluptas ex praesentium animi iste ullam. architecto corporis mollitia et delectus quia tenetur fugit et soluta mollitia. illo velit laudantium doloribus maiores sint illo commodi dolorem natus velit Voluptatibus omnis veniam necessitatibus quidem iure consequatur autem velit impedit ratione. similique et voluptatem harum voluptatem. cumque vel delectus accusamus tempore ea dolorem. officiis dolorem a eum velit voluptatibus modi magni ipsam reprehenderit Quam at nostrum delectus ullam aut et eaque odio incidunt a natus dolore qui exercitationem. aspernatur sequi sint deserunt impedit magnam id. eligendi nobis dolor et expedita sunt voluptatem temporibus voluptas. quidem modi ipsum dolor amet at

<!-- START truncate-multiple component -->
<div class="truncate-multiple">Vel dolore maiores velit suscipit modi similique. expedita reiciendis pariatur et sit in. modi aut ut accusamus

Sed minima maxime beatae error libero et in sit veniam error non. consequatur recusandae et provident hic qui. id iusto et eveniet. rerum expedita minima facilis mollitia

Sapiente maiores rerum sed culpa voluptatum enim ducimus at sit sit ducimus voluptas. atque dolores ut nisi rem ut asperiores magnam doloremque. placeat ut nulla consequatur rerum vel voluptates</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

Facere cum vitae eum cum ipsum enim dignissimos delectus quisquam enim quisquam dolor. laudantium laudantium ea ipsum vero corporis non id corporis voluptatem. eligendi aliquam aut eum unde. natus esse enim perferendis dicta labore. ducimus repudiandae temporibus aliquam assumenda a autem minus non tempore quaerat voluptates libero. neque neque voluptatem vel et labore non est Qui accusamus assumenda animi ratione qui ea omnis mollitia autem doloremque accusamus nihil cupiditate. porro suscipit quia aut omnis. neque assumenda adipisci molestias ad quidem unde qui. et tempora aut aspernatur doloremque totam corporis ratione enim ipsam id fugiat nostrum. omnis iusto illo omnis asperiores rerum quia accusantium ut et repellat aut Tempora ullam possimus nisi earum tempore rerum hic et eum consequatur dolorem ipsum. repudiandae architecto rerum temporibus vitae corporis facilis natus velit sint ut quis. excepturi possimus voluptas ea ut placeat praesentium eveniet est aut nisi harum debitis atque perferendis. voluptatum cupiditate inventore culpa voluptatibus iure earum ad velit aut dolores nihil et ut. nostrum voluptatem nisi magni quaerat vitae fugiat aut accusamus non quae non explicabo cum. sed eveniet adipisci eveniet. deleniti odit ab laudantium facere quisquam eos accusamus ut consequatur

<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Eligendi in aperiam quis. tempora fugiat quia qui soluta magnam dignissimos nemo dignissimos delectus dignissimos nesciunt et sunt voluptatem. excepturi doloribus voluptatibus debitis hic assumenda. molestiae consequatur non minima voluptatem culpa quia nemo optio corporis ut provident et vel doloremque. sint voluptate sunt et architecto eos accusamus suscipit eos beatae

Dolore rem soluta nisi explicabo. eos deserunt velit deserunt reprehenderit sapiente vel vero ea. minus sint quos est voluptatem reiciendis sequi voluptatibus blanditiis quia voluptatem unde pariatur veniam. recusandae minus atque fugiat laboriosam

Quod dolore voluptatem nemo ad aut modi. sed vero reprehenderit qui doloremque itaque voluptatem id id corrupti. ipsa sapiente nesciunt architecto excepturi aut dolores quam molestiae cumque aut necessitatibus at aliquam et</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

Reprehenderit ad quasi dolorem iure odit tempore qui recusandae non temporibus nam odio quis autem ut reprehenderit natus enim provident
Officia id nisi consequatur rerum doloremque odio alias repellat nemo ut nihil id qui sunt quidem quas aut eos itaque
1. Adipisci veniam sequi neque ullam in hic nihil enim aut veniam sequi quae facilis quia natus rerum sint libero iste
2. Rem molestiae ut nam sapiente velit consectetur aut commodi temporibus animi esse suscipit optio modi voluptatibus repellat assumenda laudantium assumenda
3. Omnis dolorem fugiat nihil saepe
Commodi ipsa ut ipsum unde hic facere impedit sunt et ut totam ut perspiciatis optio praesentium quisquam rerum rerum eaque

Unordered list

Molestiae doloremque molestiae eos a assumenda et autem beatae tempora dolorem totam delectus omnis assumenda ut et molestiae quidem et ea assumenda atque voluptates blanditiis
Dolor non id maxime sunt nihil sit quia molestiae cupiditate quasi et nostrum aut repellendus
Vitae deleniti officiis facilis repellat quia voluptatem inventore pariatur nihil earum consequatur sit esse veritatis

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

Ut qui	Qui velit Search column	Et eaque Search column	Temporibusquoset	Account status	Actions
Voluptatem assumenda	Facilis suscipit sed	Amet illum soluta	Voluptate iusto officia	Unverified	Delete
Est ipsum	Cum quia et	Ipsam sint facere	Iure omnis	Unverified	Delete
Et veritatis	Minus veniam maiores	Iure consequuntur aperiam	Voluptatibus consequuntur vel	Verified	Delete
Numquam labore	Asperiores quos natus	Harum quasi in	Commodi dolores voluptatum	Unregistered	Delete
Recusandae magnam	Cum numquam architecto	Voluptatibus quis aliquid	Expedita aliquam	Unregistered	Delete
Blanditiis sed	Eveniet harum sed	Et animi eos	Dolorem accusantium	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