Reactive Graph - Design System

HR: Surface 4 

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Horizontal Rule
        <span class="token string" style="font-size: var(--font-size-2)">surface-4</span>
    </h1>
    <h3 class="celestial-blue">Default Size</h3>
    <hr class="surface-4">
    <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-1</span></h3>
    <hr class="surface-4 size-1">
    <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-2</span></h3>
    <hr class="surface-4 size-2">
    <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-3</span></h3>
    <hr class="surface-4 size-3">
    <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-4</span></h3>
    <hr class="surface-4 size-4">
</div>
 
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Horizontal Rule
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <h3 class="celestial-blue">Default Size</h3>
  <hr {{#if modifier}}class="{{modifier}}"{{/if}}>
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-1</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-1">
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-2</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-2">
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-3</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-3">
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-4</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-4">
</div>
 
{
  "modifier": "surface-4"
}

No notes defined.