ContextQMD
Back to Sass

Components

source/styleguide/components.md

latest2.0 KB
Original Source

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 Header 4

Lists

<div class="sl-c-list-navigation-wrapper" style="height: unset; position: unset"> </div> <div class="sl-c-list-horizontal-wrapper"> </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>