mirror of
https://github.com/danog/sass-site.git
synced 2024-12-02 17:38:26 +01:00
134 lines
2.0 KiB
Markdown
134 lines
2.0 KiB
Markdown
---
|
|
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>
|