Buttons

<h2 class="styleguide-title">Buttons</h2>
<div class="preview-inner-container">
    <h3 class="styleguide">Small buttons</h3>
    <input type="button" class="btn btn--small " value="Button">
    <h3 class="styleguide">Inline: Small buttons</h3>
    <input type="button" class="btn btn--small inline" value="Button">

    <h3 class="styleguide">Medium buttons</h3>
    <input type="button" class="btn btn--medium " value="Button">
    <h3 class="styleguide">Inline: Medium buttons</h3>
    <input type="button" class="btn btn--medium inline" value="Button">

    <h3 class="styleguide">Large buttons</h3>
    <button class="btn btn--large ">Button</button>
    <h3 class="styleguide">Inline: Large buttons</h3>
    <button class="btn btn--large inline">Button</button>
</div>
<h2 class="styleguide-title">Buttons</h2>
<div class="preview-inner-container">
  <h3 class="styleguide">Small buttons</h3>
  {% include '@button-sm' %}
  <h3 class="styleguide">Inline: Small buttons</h3>
  {% include '@button-sm' with { 'modifier': 'inline' } %}

  <h3 class="styleguide">Medium buttons</h3>
  {% include '@button-md' %}
  <h3 class="styleguide">Inline: Medium buttons</h3>
  {% include '@button-md' with { 'modifier': 'inline' } %}

  <h3 class="styleguide">Large buttons</h3>
  {% include '@button-lg' %}
  <h3 class="styleguide">Inline: Large buttons</h3>
  {% include '@button-lg' with { 'modifier': 'inline' } %}
</div>
{
  "text": "Button"
}

There are no notes for this item.