<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

<a href="#" class="link">Link Text</a>

<p class="text-b1">XL Body - Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p class="text-b2">L Body - Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Default Body - Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p class="text-b4">Small Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<small>Smallest for labels</small>

<s>Strikethrough</s>

<em>Italics</em>

<div><strong>Strong</strong></div>
<div><b>Bold</b></div>

<button class="button button--primary">Primary default</button>

<button class="button button--secondary">Secondary default</button>

<button class="button button--primary button--sm">Primary small</button>

<button class="button button--secondary button--sm">Secondary small</button>

<button class="button button--primary button--md">Primary medium</button>

<button class="button button--secondary button--md">Secondary medium</button>

<button class="button button--primary button--lg">Primary large</button>

<button class="button button--secondary button--lg">Secondary large</button>

<button class="button button--primary button--xl">Primary xlarge</button>

<button class="button button--secondary button--xl">Secondary xlarge</button>

<div class="field field__input">
  <label for="text-input">Label</label>
  <input type="text" id="text-input" placeholder="Text input">
</div>

<div class="field field__input">
  <label for="text-input">Label</label>
  <input type="text" id="text-input" placeholder="Text input">
  <div class="message">Field description</div>
</div>

<div class="field field__input field__input--locked">
  <label for="text-input">Locked</label>
  <div class="relative">
    <input type="text" id="text-input" disabled="disabled" value="Disabled">
    <span class="absolute icon-lock-fill right-2 top-3"></span>
  </div>
</div>

<div class="field field__input">
  <label for="textarea">Textarea</label>
  <textarea type="textarea" id="textarea" placeholder="Textarea" maxlength="150"></textarea>
  <div class="message">Max 150 characters</div>
</div>

<div class="field field__input field__input--error">
  <label for="text-input">Error</label>
  <input type="text" id="text-input" placeholder="Text input" value="Error">
  <div class="message">Error message</div>
</div>

<div class="block field field__choice w-50 md:hidden">
  <label for="select">Select</label>
  <select id="select">
    <option value="$20" selected="selected">$20</option>
    <option value="$50">$50</option>
    <option value="$100">$100</option>
    <option value="$150">$150</option>
  </select>
</div>

<div class="field field__choice">
  <div class="choice-wrapper">
    <label for="checkbox-input-1">
      <input type="checkbox" id="checkbox-input-1" name="checkbox" checked="checked">
      <div class="indicator">
<span class="icon-tick"></span>
      </div>
      Checkbox Option 1
    </label>
  </div>

  <div class="choice-wrapper">
    <label for="checkbox-input-2">
      <input type="checkbox" id="checkbox-input-2" name="checkbox">
      <div class="indicator">
<span class="icon-tick"></span>
      </div>
      Checkbox Option 2
    </label>
  </div>
</div>

<div class="field field__choice">
  <div class="choice-wrapper">
    <label for="radio-input-1">
      <input type="radio" id="radio-input-1" name="radio" checked="checked">
      <div class="indicator">
<span class="icon-tick"></span>
      </div>
      Radio Option 1
    </label>
  </div>

  <div class="choice-wrapper">
    <label for="radio-input-2">
      <input type="radio" id="radio-input-2" name="radio">
      <div class="indicator">
<span class="icon-tick"></span>
      </div>
      Radio Option 2
    </label>
  </div>

  <div class="choice-wrapper">
    <label for="radio-input-3">
      <input type="radio" id="radio-input-3" name="radio">
      <div class="indicator">
<span class="icon-tick"></span>
      </div>
      Radio Option 3
    </label>
  </div>
</div>