v5 Content typography browser check

Page to check how our typography classes display in alternative browsers.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Deserunt dolores quam neque dolores, test link quia quia sunt et aut strong et sit sit dolore qui emphasis nostrum autem dolorum ut sed.

Highlighted paragraph consectetur ut ipsum quia nihil.

List Item 1

List Item 2

List Item 3

optio consectetur qui iure minima.

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.

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)

Et alias eos dolorum ipsum. cumque qui asperiores illum voluptas rerum ut quis recusandae ut. voluptas vel eius dolorum qui in reprehenderit quod velit sed incidunt modi. sunt aut voluptate est. voluptatem porro vel consequatur repudiandae vel ut. dolor quia et voluptas sunt delectus dolores nisi Exercitationem praesentium porro corrupti. quia omnis numquam commodi et nesciunt dolorum doloremque. error sed aut odio laboriosam sed ipsa animi perferendis fuga voluptates nostrum ea saepe sint. est tenetur sapiente voluptatum facilis tempora quos voluptatem sunt et quasi non cupiditate nemo Voluptatibus rerum ullam fugit saepe nobis est laudantium quo assumenda et et sunt modi voluptatem. quo ipsa veritatis quia quia harum dicta repellat dolore error dolore quia maiores ex. numquam id sit quia recusandae modi sunt pariatur est sit ab culpa autem iure molestiae
<!-- START truncate-multiple component -->
<div class="truncate-multiple">Eum aliquid vel dolor voluptates sed occaecati. officia officia odit culpa beatae. aut ab et vel possimus. saepe ut dolores voluptates et voluptatem ut tempore accusantium porro. nemo iure qui in rerum. quis et omnis omnis facilis

Cupiditate sed adipisci et hic enim illo accusantium perspiciatis consequatur. quo dignissimos et beatae. aut nulla optio explicabo reiciendis sit quia excepturi. excepturi est fugit ipsam maxime quibusdam tempore nobis in deserunt aspernatur adipisci. accusamus error excepturi voluptates fugit inventore explicabo numquam blanditiis voluptatibus aut consectetur dolores est. expedita quo et deleniti eius aut

Suscipit qui et ipsum dolores incidunt. et laboriosam officia commodi maxime suscipit magni corporis ratione corporis consequatur. similique fuga placeat earum porro ea ipsam error voluptatem autem a ratione dolores minima. odio impedit alias error vitae ducimus. accusamus quo quam totam. dicta rerum atque aspernatur quibusdam qui. animi et nemo sint eos quo vel id et ut omnis autem quibusdam aut</div>
<!-- END truncate-multiple component -->

Multiple line truncate (3 lines)

Repellendus consectetur quia sit. consequatur dignissimos eos facere omnis officia et. voluptatem optio rem voluptatum voluptate eum quam dignissimos. doloribus porro consequuntur voluptatem sequi nobis et voluptatem aut non Non ad occaecati pariatur enim dicta. culpa recusandae et atque doloremque earum magni amet illo est qui eos facilis et. nesciunt quis ducimus itaque eveniet nihil consequatur sit hic excepturi Nemo repellendus omnis similique ut cupiditate nobis. sapiente dolorem deserunt esse facere autem consequatur molestiae consequatur fugit optio voluptatem. sint enim enim eaque omnis est sed
<!-- START truncate-multiple component -->
<div class="truncate-multiple" style="--truncate-multiple-lines: 3;">Necessitatibus iusto iusto id aut blanditiis vel sit suscipit nostrum eos voluptatem ullam quia corrupti. rerum quia autem omnis natus et architecto ratione voluptas omnis a aspernatur reprehenderit. sint modi tenetur beatae enim et est nam sit porro et inventore omnis facere nihil

Dolor dolor animi temporibus. repellat aut consequuntur tempora atque repudiandae recusandae dolore commodi. sapiente in laudantium nostrum vitae velit et consequatur atque non praesentium earum

Quis soluta ut delectus necessitatibus in rerum quia atque dolorem delectus ratione animi quas itaque. aut laboriosam iste non quidem eum in. et sit est ut aliquam molestiae magnam nihil iure excepturi quae commodi dolore</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. Velit dolorum voluptatum esse libero voluptatum harum dolor veritatis eius voluptate sequi est similique voluptatem aut cumque consequatur et aliquid
  2. Quis dolore accusantium voluptatem iusto nemo a libero unde aut sit occaecati reiciendis quaerat aliquid rerum aspernatur cum est id
    1. Harum unde dolor minus libero consequatur molestiae et quam eos laudantium maiores saepe eos et est dignissimos suscipit maiores placeat
    2. Dolor facilis voluptas non nostrum quae voluptatem unde id est vitae nihil quo enim in voluptatem commodi deserunt sed eveniet
    3. Earum dolor sit voluptatum aut
  3. Molestiae porro architecto doloremque non ullam nihil esse vitae perspiciatis tempora et nemo accusantium facere voluptatem hic ipsa ut porro

Unordered list

  • Vitae et tempora dolorem inventore consequuntur consequatur vero in consequatur qui ducimus sit repellendus sapiente excepturi inventore repellendus consequatur error quidem eos magni aut temporibus
  • Et atque qui eligendi et quae quaerat consequatur molestiae officia est dolorem eveniet dicta pariatur
  • Sit consequuntur voluptate labore laboriosam quo sed et et nisi expedita molestiae non inventore illo

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

Superscript, subscript, cite, acronym, abbreviation, pre, blockquote

Lorem superscript exercitationem facere magnam sed explicabo subscript rerum incidunt id est repellat cite. consectetur autem eos at in ACRONYM sequi molestias quod reiciendis magni ABBR vero aperiam ut dolor fuga

Pre cum tenetur suscipit qui quis.
Blockquote distinctio eius officia dolorem similique et omnis dolores enim inventore dolor aut et et reprehenderit tempora qui repudiandae aut modi tenetur reiciendis dolor perferendis aut.