Reactive Graph - Design System

Blockquote: Default 

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Blockquote
        <span class="token string" style="font-size: var(--font-size-2)">default</span>
    </h1>
    <hr>
    <h2 class="celestial-blue">Standard</h2>

    <blockquote class="default">
        <p>Two things are infinite: the universe and human stupidity; and I&#x27;m not sure about the universe.</p>
        <cite>Albert Einstein</cite>
    </blockquote>

    <h2 class="celestial-blue">Full Width</h2>

    <blockquote class="default full-width">
        <p>Two things are infinite: the universe and human stupidity; and I&#x27;m not sure about the universe.</p>
        <cite>Albert Einstein</cite>
    </blockquote>

    <h2 class="celestial-blue">Background Pattern</h2>

    <blockquote class="default background-pattern">
        <p>Two things are infinite: the universe and human stupidity; and I&#x27;m not sure about the universe.</p>
        <cite>Albert Einstein</cite>
    </blockquote>

    <h2 class="celestial-blue">Full Width and Background Pattern</h2>

    <blockquote class="default full-width background-pattern">
        <p>Two things are infinite: the universe and human stupidity; and I&#x27;m not sure about the universe.</p>
        <cite>Albert Einstein</cite>
    </blockquote>

</div>
 
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Blockquote
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h2 class="celestial-blue">Standard</h2>

  <blockquote {{#if modifier}}class="{{modifier}}"{{/if}}>
    <p>{{text}}</p>
    <cite>{{citation}}</cite>
  </blockquote>

  <h2 class="celestial-blue">Full Width</h2>

  <blockquote class="{{#if modifier}}{{modifier}}{{/if}} full-width">
    <p>{{text}}</p>
    <cite>{{citation}}</cite>
  </blockquote>

  <h2 class="celestial-blue">Background Pattern</h2>

  <blockquote class="{{#if modifier}}{{modifier}}{{/if}} background-pattern">
    <p>{{text}}</p>
    <cite>{{citation}}</cite>
  </blockquote>

  <h2 class="celestial-blue">Full Width and Background Pattern</h2>

  <blockquote class="{{#if modifier}}{{modifier}}{{/if}} full-width background-pattern">
    <p>{{text}}</p>
    <cite>{{citation}}</cite>
  </blockquote>

</div>
 
{
  "text": "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
  "citation": "Albert Einstein",
  "modifier": "default"
}

No notes defined.