Skip to main contentSkip to site searchSkip to component search
Honeycomb

Text

Defines the standard paragraph style.

The flix-text class adds styles for bodies of text and it can be added either to a paragraph or a paragraph wrapper, like so:

Normal paragraph, flix-text element

Flix-text as a text container

Styles are applied to HTML elements within the flix-text container. This can be useful when you want to style a generated text where you have less control on HTML elements and their classes (e.g text content in CMS systems or static sites generators).

So styles are automatically applied for links

Or headings

And blockquotes as well
  • Or list items
  • list items
  • and list items
  1. Or numbered list items
  2. list items
    1. With a nested list item
  3. and other list items
<p class="flix-text">
    Normal paragraph, flix-text element
</p>

<div class="flix-text">
    <h2 class="hcr-h2-10-8-1 toc-anchor">Flix-text as a text container</h2>
    <p>Styles are applied to HTML elements within the flix-text container. This can be useful when you want to style a generated text where you have less control on HTML elements and their classes (e.g text content in CMS systems or static sites generators).</p>
    <p>So styles are automatically applied for <a class="hcr-link-10-8-1" href="#">links</a></p>
    <h3 class="hcr-h3-10-8-1 toc-anchor">Or headings</h3>
    <blockquote class="hcr-blockquote-10-8-1">And blockquotes as well</blockquote>
    <ul>
        <li>Or list items</li>
        <li>list items</li>
        <li>and list items</li>
    </ul>
    <ol>
        <li>Or numbered list items</li>
        <li>
            list items
            <ol>
                <li>With a nested list item</li>
            </ol>
        </li>
        <li>and other list items</li>
    </ol>
</div>

The --small modifier is a smaller text font for content with lower hierarchy.

Smaller variation of the flix-text element. 

<p class="flix-text--small">
    Smaller variation of the flix-text element.
</p>

Note: If you need to write copyright text or small print, consider using the fineprint instead.