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
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)
<!-- 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)
<!-- 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
- Velit dolorum voluptatum esse libero voluptatum harum dolor veritatis eius voluptate sequi est similique voluptatem aut cumque consequatur et aliquid
- Quis dolore accusantium voluptatem iusto nemo a libero unde aut sit occaecati reiciendis quaerat aliquid rerum aspernatur cum est id
- Harum unde dolor minus libero consequatur molestiae et quam eos laudantium maiores saepe eos et est dignissimos suscipit maiores placeat
- Dolor facilis voluptas non nostrum quae voluptatem unde id est vitae nihil quo enim in voluptatem commodi deserunt sed eveniet
- Earum dolor sit voluptatum aut
- 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.