sass-site/source/styleguide/components.md

---
title: Components
---

## Closed

<dl class="sl-c-description-list sl-c-description-list--horizontal">
  <div>
    <dt>Dart Sass</dt>
    <dd>✓</dd>
  </div>
  <div>
    <dt>Ruby Sass</dt>
    <dd>since 3.5.0</dd>
  </div>
  <div><a href="#">▶︎</a></div>
</dl>

## Open

<dl class="sl-c-description-list sl-c-description-list--horizontal">
  <div>
    <dt>Dart Sass</dt>
    <dd>✓</dd>
  </div>
  <div>
    <dt>Ruby Sass</dt>
    <dd>since 3.5.0</dd>
  </div>
  <div><a href="#">▼</a></div>
</dl>

<div class="sl-c-callout">
  <p>{% lorem 'paragraph' %}</p>
</div>

## Alerts

<div class="sl-c-alert">
  <div class="sl-l-container">
    <p>
      <strong>Alert</strong>
      {% lorem 'sentence' %}
    </p>
  </div>
</div>

<div class="sl-c-alert sl-c-alert--info">
  <div class="sl-l-container">
    <p>
      <strong>Info Alert</strong>
      {% lorem 'sentence' %}
    </p>
  </div>
</div>

## Buttons

<a href="#" class="sl-c-button">Link</a>
<button class="sl-c-button" type="button">Button</button>

<a href="#" class="sl-c-button sl-c-button--primary">Link</a>
<button class="sl-c-button sl-c-button--primary" type="button">Button</button>

## Callouts

<div class="sl-c-callout">

  ### Callout

  {% lorem 'paragraph' %}
</div>

<div class="sl-c-callout sl-c-callout--warning">

  ### Warning

  {% lorem 'paragraph' %}
</div>

<div class="sl-c-callout sl-c-callout--fun-fact">

  ### Fun Fact

  {% lorem 'paragraph' %}
</div>

## Introduction

<p class="sl-c-introduction">
  {% lorem 'paragraph' %}
</p>

<div class="sl-c-introduction">
  <p>{% lorem 'paragraph' %}</p>
</div>

## Link Headers

## Link Header 2
### Link Header 3
#### Link Header 4

## Lists

<div class="sl-c-list-navigation-wrapper" style="height: unset; position: unset">

  - [Vertical](#)
  - [Navigation](#)
  - [List](#)

</div>

<div class="sl-c-list-horizontal-wrapper">

  - [Horizontal](#)
  - [Navigation](#)
  - [List](#)

</div>

## Pop Stripe

<div class="sl-c-pop-stripe"></div>

## Tables

<table class="sl-c-table">
  <tr>
    <td>Table</td>
    <td>Table</td>
  </tr>
</table>