Paragraph Styles

WIP

HTML
View
Context
Notes


        
        <div class="frctl-section">
    <div class="frctl-section__entry">
        <p><strong>Lorem ipsum dolor sit amet,</strong> <i>consectetuer adipiscing elit.</i> <strike>Donec odio.</strike> Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <span><code class="fractal-code">Basic &lt;p&gt; tag</code></span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--small"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--small"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--reg"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--reg"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--large"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--large"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--cta"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--cta"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--caption"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--caption"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--credit"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--credit"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--time"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--time"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--blockquote"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--blockquote"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--blockquote-large"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--blockquote-large"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--attribution"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--attribution"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-text--attribution-byline"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-text--attribution-byline"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-upper"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-upper"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-light"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-light"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-reg"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-reg"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-bold"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-bold"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-italic"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-italic"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <p class="f-spaced"><strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href="#">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.</p>
        <span>
            <code class="fractal-code">class="f-spaced"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

</div>


        <div class="frctl-section">
  <div class="frctl-section__entry">
    <p><strong>Lorem ipsum dolor sit amet,</strong> <i>consectetuer adipiscing elit.</i> <strike>Donec odio.</strike> Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <span><code class="fractal-code">Basic &lt;p&gt; tag</code></span>
  </div>

  {% for class in classes %}
    <div class="frctl-section__entry">
      <p class="{{ class }}">{{ text }}</p>
      <span>
        <code class="fractal-code">class="{{ class }}"</code>
        <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
      </span>
    </div>
  {% endfor %}
</div>


        
            
            {
  "pageColorTheme": "teal",
  "text": "<strong>Lorem</strong> <em>ipsum</em> <u>dolor</u> <strike>sit</strike> amet. Consectetuer<sup>1</sup> adipiscing<sub>2</sub> elit. Donec odio. <a href=\"#\">Quisque volutpat mattis</a> eros. Nullam malesuada erat ut turpis.",
  "classes": [
    "f-text--small",
    "f-text--reg",
    "f-text--large",
    "f-text--cta",
    "f-text--caption",
    "f-text--credit",
    "f-text--time",
    "f-text--blockquote",
    "f-text--blockquote-large",
    "f-text--attribution",
    "f-text--attribution-byline",
    "f-upper",
    "f-light",
    "f-reg",
    "f-bold",
    "f-italic",
    "f-spaced"
  ]
}

No notes defined.