Components

Longread(SCSS)

Default styling for long passages of text where it's impractical to add classes.

Version:4.0.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-scss

Styled long-form text

The tp-longread class adds styles to its child HTML elements. This is helpful when working with HTML generated by a CMS or markdown parser.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend posuere venenatis. Cras est mi, porta a suscipit id, vehicula at sem. Phasellus malesuada est non magna mollis, sit amet molestie odio tincidunt. Nulla ex urna, tristique non massa consequat, eleifend interdum magna.

Morbi sagittis, dolor et molestie rhoncus

  • Phasellus at quam lacus
  • Aenean quis est neque
  • Maecenas a tincidunt risus

Duis pretium viverra leo ac sagittis?

Vivamus a consectetur libero, sit amet sagittis neque. Etiam non elit nec purus tempus tincidunt id sit amet ipsum. Sed scelerisque enim viverra vehicula hendrerit.

Proin sit amet metus eu augue suscipit blandit at eu massa. Suspendisse semper sed lectus quis suscipit. Praesent finibus lobortis facilisis. Maecenas est leo, tincidunt id fermentum non, varius ac turpis. Quisque a nibh egestas, commodo dui a, malesuada felis. Etiam dolor urna, eleifend sed placerat ac, tempor vestibulum quam.

Integer nunc nibh, vestibulum vel lorem ac

In et turpis fringilla, posuere metus at, pellentesque lectus. Ut vulputate magna in velit aliquam, eu egestas ante dignissim. Sed pellentesque dolor a interdum vehicula. Donec vitae tellus finibus, blandit nunc eu, maximus dui. In molestie rhoncus sapien. Curabitur ornare nisl sollicitudin magna placerat, eget ullamcorper libero cursus. Nunc aliquet erat ut elementum fermentum. Integer eleifend varius tempus. Etiam sed pellentesque lorem, eget varius felis.

  1. Ut vehicula felis magna, sit amet tincidunt urna tristique euismod.
  2. Integer posuere velit et nibh sollicitudin aliquam.
  3. Vestibulum quis neque tellus.

Cras varius dui quis efficitur posuere. Duis vel lacinia orci. Donec pharetra nisl vel tortor interdum, id suscipit felis venenatis. Phasellus accumsan blandit euismod. Nullam ipsum nisi, sagittis vel cursus sed, feugiat eget ipsum. Quisque quis enim vel justo vestibulum laoreet consequat ut nibh. In luctus augue sit amet leo fermentum, et vulputate sapien placerat. Nulla et pellentesque magna. Fusce elit enim, facilisis et urna sed, eleifend ultrices diam. Nam a fringilla ipsum. Nulla vitae hendrerit orci, sit amet faucibus mi.

<div class="tp-longread">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend posuere venenatis.
Cras est mi, porta a suscipit id, vehicula at sem. Phasellus malesuada est non magna mollis,
sit amet molestie odio tincidunt. Nulla ex urna, tristique non massa consequat, eleifend
interdum magna.
</p>
<h2>Morbi sagittis, dolor et molestie rhoncus</h2>
<ul>
<li>Phasellus at quam lacus</li>
<li>Aenean quis est neque</li>
<li>Maecenas a tincidunt risus</li>
</ul>
<h2>Duis pretium viverra leo ac sagittis?</h2>
<p>
Vivamus a consectetur libero, sit amet sagittis neque. Etiam non elit nec purus tempus
tincidunt id sit amet ipsum. Sed scelerisque enim viverra vehicula hendrerit.
</p>
<p>
Proin sit amet metus eu augue suscipit blandit at eu massa. Suspendisse semper sed lectus
quis suscipit. Praesent finibus lobortis facilisis. Maecenas est leo, tincidunt id fermentum
non, varius ac turpis. Quisque a nibh egestas, commodo dui a, malesuada felis. Etiam dolor
urna, eleifend sed placerat ac, tempor vestibulum quam.
</p>
<h3>Integer nunc nibh, vestibulum vel lorem ac</h3>
<p>
In et turpis fringilla, posuere metus at, pellentesque lectus. Ut vulputate magna in velit
aliquam, eu egestas ante dignissim. Sed pellentesque dolor a interdum vehicula. Donec vitae
tellus finibus, blandit nunc eu, maximus dui. In molestie rhoncus sapien. Curabitur ornare
nisl sollicitudin magna placerat, eget ullamcorper libero cursus. Nunc aliquet erat ut
elementum fermentum. Integer eleifend varius tempus. Etiam sed pellentesque lorem, eget
varius felis.
</p>
<ol>
<li>Ut vehicula felis magna, sit amet tincidunt urna tristique euismod.</li>
<li>Integer posuere velit et nibh sollicitudin aliquam.</li>
<li>Vestibulum quis neque tellus.</li>
</ol>
<p>
Cras varius dui quis efficitur posuere. Duis vel lacinia orci. Donec pharetra nisl vel
tortor interdum, id suscipit felis venenatis. Phasellus accumsan blandit euismod. Nullam
ipsum nisi, sagittis vel cursus sed, feugiat eget ipsum. Quisque quis enim vel justo
vestibulum laoreet consequat ut nibh. In luctus augue sit amet leo fermentum, et vulputate
sapien placerat. Nulla et pellentesque magna. Fusce elit enim, facilisis et urna sed,
eleifend ultrices diam. Nam a fringilla ipsum. Nulla vitae hendrerit orci, sit amet faucibus
mi.
</p>
</div>
Was this page helpful?

We use this feedback to improve the quality of our documentation.