⚡ AMP Spectre CSS Framework

Download from GitHub

Elements

Typography

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

<h1>H1 Heading</h1>
<h1>H1 Heading <small class="label">40px</small></h1>
<span class="h1">H1 Heading</span>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

<p>Lorem ipsum dolor sit amet, ...</p>
<p>...</p>

Semantic text elements

I18N <abbr>

Bold <strong> <b>

Citation <cite>

Hello World! <code>

~~Deleted~~ <del>

Emphasis <em>

Italic <i>

Inserted <ins>

Ctrl + S <kbd>

Highlighted <mark>

漢 kan 字 ji <ruby>

~~Strikethrough~~ <s>

Sample <samp>

Text _Subscripted <sub>

Text ^{Superscripted} <sup>

20:00 <time>

Underline <u>

x = y + 2 <var>

Optimized for East Asian fonts

你好 , こんにちは , 안녕하세요

Chinese (Simplified)

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

Chinese (Tranditional)

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

Japanese

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。

Korean

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

Add the lang attribute to the <html> element or use the class lang-zh, lang-zh-hans, lang-zh-hant, lang-ja or lang-ko to have better Asian CJK (Chinese, Japanese and Korean) font support.

<p class="lang-zh-hans">革命不是请客吃饭，不是做文章……</p>
<p class="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
<p class="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>

And you can use the lang-cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

祇園精舎の鐘の声、諸行無常の響きあり。

<p class="lang-cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
<p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>

Fonts

Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.

/* Western typography targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
/* Monospace typography targeted */
font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;

/* Chinese (lang="zh" and lang="zh-Hans") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
/* Chinese (lang="zh-Hant") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
/* Japanese (lang="ja") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
/* Korean (lang="ko") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- Bill Gates

<blockquote>
  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
  <cite>- Bill Gates</cite>
</blockquote>

Lists

list item 1
list item 2
- list item 2.1
- list item 2.2
- list item 2.3
list item 3

list item 1
list item 2
1. list item 2.1
2. list item 2.2
3. list item 2.3
list item 3

description list term 1: description list description 1
description list term 2: description list description 2
description list term 3: description list description 3

<!-- unordered list -->
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2.1</li>
      <li>list item 2.2</li>
      <li>list item 2.3</li>
    </ul>
  </li>
  <li>list item 3</li>
</ul>

<!-- description list -->
<dl>
  <dt>description list term</dt>
  <dd>description list description</dd>
</dl>

Tables

Tables include default styles for tables and data sets.

Name	Genre	Release date
The Shawshank Redemption	Crime, Drama	14 October 1994
The Godfather	Crime, Drama	24 March 1972
Schindler's List	Biography, Drama, History	4 February 1994
Se7en	Crime, Drama, Mystery	22 September 1995

Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.

Use the active class to make <tr> element highlighted.

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>name</th>
      <th>genre</th>
      <th>release date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

If you need the tables with horizontal scroll, add the table-scroll class to the <table> element.

Name	Genre	Director	Rating	Duration	Release date
The Shawshank Redemption	Crime, Drama	Frank Darabont	R	2h 22min	14 October 1994
The Godfather	Crime, Drama	Francis Ford Coppola	R	2h 55min	24 March 1972
Schindler's List	Biography, Drama, History	Steven Spielberg	R	3h 15min	4 February 1994
Se7en	Crime, Drama, Mystery	David Fincher	R	2h 7min	22 September 1995

<table class="table table-scroll">
  <!-- table content -->
</table>

Buttons

Buttons include simple button styles for actions in different types and sizes.

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

<button class="btn">default button</button>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-link">link button</button>

Button colors

Add the btn-success or btn-error class for success (green) or error (red) button color. If you need more button colors, please use button mixins to create your own button color variants.

<button class="btn btn-success">success button</button>
<button class="btn btn-error">error button</button>

Button sizes

Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.

<button class="btn btn-lg">large button</button>
<button class="btn btn-sm">small button</button>

<button class="btn btn-block">block button</button>

<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>

Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).

<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
<button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>

Button states

Add the active class for active button state style.

<!-- buttons with active state -->
<button class="btn active">active button</button>

Add the disabled class or the disabled attribute for disabled button state style.

<!-- buttons with disabled state -->
<button class="btn disabled" tabindex="-1">disabled button</button>
<button class="btn" disabled tabindex="-1">disabled button</button>

A button with the loading class can show loading indicator.

<!-- a button with loading state -->
<button class="btn loading">button</button>

Button groups

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

<div class="btn-group btn-group-block">
  <button class="btn">first button</button>
  <button class="btn">second button</button>
  <button class="btn">third button</button>
</div>

Forms

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

Name

<!-- form input control -->
<div class="form-group">
  <label class="form-label" for="input-example-1">Name</label>
  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
</div>

Message

<!-- form textarea control -->
<div class="form-group">
  <label class="form-label" for="input-example-3">Message</label>
  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
</div>

<!-- form select control -->
<div class="form-group">
  <select class="form-select">
    <option>Choose an option</option>
    <option>Slack</option>
    <option>Skype</option>
    <option>Hipchat</option>
  </select>
</div>

<!-- form radio control -->
<div class="form-group">
  <label class="form-label">Gender</label>
  <label class="form-radio">
    <input type="radio" name="gender" checked>
    <i class="form-icon"></i> Male
  </label>
  <label class="form-radio">
    <input type="radio" name="gender">
    <i class="form-icon"></i> Female
  </label>
</div>

Send me emails with news and tips

<!-- form switch control -->
<div class="form-group">
  <label class="form-switch">
    <input type="checkbox">
    <i class="form-icon"></i> Send me emails with news and tips
  </label>
</div>

Remember me

<!-- form checkbox control -->
<div class="form-group">
  <label class="form-checkbox">
    <input type="checkbox">
    <i class="form-icon"></i> Remember me
  </label>
</div>

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

Horizontal forms

If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] and col-xs/sm/lg/xl-[1-12] class to the child elements for responsive form row layout.

Name

Gender

Male Female

Source

Send me emails with news and tips

Message

Remember me

<form class="form-horizontal">
  <div class="form-group">
    <div class="col-3 col-sm-12">
      <label class="form-label" for="input-example-1">Name</label>
    </div>
    <div class="col-9 col-sm-12">
      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
    </div>
  </div>
  <!-- form structure -->
</form>

Form sizes

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

Label

You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

Form icons

Spectre Form components has Spectre Icons support.

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>.

<!-- form input with Spectre icon -->
<div class="has-icon-left">
  <input type="text" class="form-input" placeholder="...">
  <i class="form-icon icon icon-check"></i>
</div>

You can use the loading class for loading or posting state.

<!-- form input with loading icon -->
<div class="has-icon-right">
  <input type="text" class="form-input" placeholder="...">
  <i class="form-icon loading"></i>
</div>

Input types

URL

Tel

Number

Date

Color

Input groups

slack.com/

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

<!-- normal input group -->
<div class="input-group">
  <span class="input-group-addon">...</span>
  <input type="text" class="form-input" placeholder="...">
</div>

<!-- large input group -->
<div class="input-group">
  <span class="input-group-addon addon-lg">...</span>
  <input type="text" class="form-input input-lg" placeholder="...">
</div>

<!-- normal input group with button -->
<div class="input-group">
  <span class="input-group-addon">...</span>
  <input type="text" class="form-input" placeholder="...">
  <button class="btn btn-primary input-group-btn">Submit</button>
</div>

Form validation styles

To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

Input

Name

The name is valid.

Password

Passwords must have at least 8 characters.

The Email address is unavailable.

Select

The option is invalid.

The option is available.

Checkbox, Radio and Switch (Error state only)

I'm not a robot.

Male Female

Send me emails with news and tips

<form>
  <!-- form validation class: has-success -->
  <div class="form-group has-success">
    <label class="form-label" for="input-example-1">Name</label>
    <input class="form-input" type="text" id="input-example-1" placeholder="...">
    <p class="form-input-hint">The name is invalid.</p>
  </div>

  <!-- form validation class: is-success -->
  <div class="form-group">
    <label class="form-label" for="input-example-1">Name</label>
    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
    <p class="form-input-hint">The name is invalid.</p>
  </div>

  <!-- form validation example for checkbox, radio and switch -->
  <div class="form-group">
    <label class="form-checkbox is-error">
      <input type="checkbox">
      <i class="form-icon"></i> Remember me
    </label>
  </div>
</form>

Form disabled styles

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

Name

Gender Male Female

Send me emails with news and tips

Message

Remember me

Icons experimental

Icons are single-element, responsive and pure CSS icons. You can insert the contents of spectre-icons.css to your <style amp-custom> to have these CSS icons.

icon-arrow-up

icon-arrow-right

icon-arrow-down

icon-arrow-left

icon-menu

icon-check

<i class="icon icon-menu"></i>

Icon sizes

Use icon-2x, icon-3x and icon-4x classes to increase icon sizes. You can set font-size to have different icon sizes.

icon-2x (32px)

icon-3x (48px)

icon-4x (64px)

<i class="icon icon-2x icon-check"></i>

Labels

Labels are formatted text tags for highlighted, informative information.

default label primary label secondary label success label warning label error label

Add the label class to <span> or <small> elements. You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.

default label primary label secondary label success label warning label error label

Add the label-rounded class to have rounded labels.

<span class="label">default label</span>
<span class="label label-primary">primary label</span>

Codes

Codes are inline and multiline code snippets.

For inline code, you can use the element <code>. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

<!-- code snippets -->
<button class="btn">
  Submit
</button>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
  Submit
&lt;<span class="tag">/button</span>&gt;
</code></pre>

Media

Media includes responsive images, figures and video classes.

Images

Add the img-responsive class to <amp-img> elements. The images will scale with the parent sizes.

Add the img-fit-contain or img-fit-cover class to <amp-img> or <amp-video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is in preview.

img-fit-contain

img-fit-cover

<amp-img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
<amp-img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
<amp-img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">

You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.

macOS Yosemite wallpaper

<figure class="figure">
  <amp-img src="img/osx-yosemite-2.jpg" class="img-responsive ..." alt="...">
  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
</figure>

Layout

Flexbox grid

Layout includes flexbox based responsive grid system with 12 columns.

col-12 (100%)

col-9 (75%)

col-6 (50%)

col-3 (25%)

Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

And you can add the col-gapless class to the columns to have gapless columns.

col-6 (gapless)

By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.

col-8

<div class="container">
  <div class="columns">
    <div class="column col-6">col-6</div>
    <div class="column col-3">col-3</div>
    <div class="column col-2">col-2</div>
    <div class="column col-1">col-1</div>
  </div>

  <div class="columns col-gapless">
    <div class="column col-6">col-6</div>
    <div class="column col-6">col-6</div>
  </div>

  <div class="columns col-oneline">
    <div class="column col-8">col-8</div>
    <div class="column col-8">col-8</div>
  </div>
</div>

Grid offset

The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

col-2

col-4 col-mx-auto

col-2

col-4 col-ml-auto

col-2

col-4 col-mx-auto

col-2

col-4 col-mr-auto

col-2

col-4 col-mx-auto

<div class="container">
  <div class="columns">
    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
    <div class="column col-2">col-2</div>
  </div>
</div>

Grid nesting

To nest grids, add the new columns and column structure within an existing column.

col-6

<div class="container">
  <div class="columns">
    <div class="column col-6">col-6
      <div class="columns">
        <div class="column col-6">col-6</div>
        <div class="column col-6">col-6</div>
      </div>
    </div>
    <div class="column col-6">col-6</div>
  </div>
</div>

Responsive

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

col-10
col-lg-8
col-md-6
col-sm-4

col-2
col-lg-4
col-md-6
col-sm-8

There are col-xs-[1-12], col-sm-[1-12], col-md-[1-12], col-lg-[1-12] and col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

col-xs-[1-12] apply to window width smaller than or equal to 480px.
col-sm-[1-12] apply to window width smaller than or equal to 600px.
col-md-[1-12] apply to window width smaller than or equal to 840px.
col-lg-[1-12] apply to window width smaller than or equal to 960px.
col-xl-[1-12] apply to window width smaller than or equal to 1280px.
col-[1-12] apply to all window width, including the width wider than 1280px.

<div class="container">
  <div class="columns">
    <div class="column col-xs-6">col-xs-6</div>
    <div class="column col-xs-3">col-xs-3</div>
    <div class="column col-xs-3">col-xs-3</div>
  </div>
</div>

Responsive container

The responsive layout also provides fixed-width containers. Use grid-xs(480px), grid-sm (600px), grid-md (840px), grid-lg (960px) or grid-xl (1280px) to container for a fixed-width container with the specific max-width.

<!-- 100% width container with max-width set to grid-lg (960px) -->
<div class="container grid-lg">
  <div class="columns">
    ...
  </div>
</div>

Responsive visibility

The responsive visibility utilities help show and hide elements on specific viewport sizes.

	size-xs	size-sm	size-md	size-lg	size-xl
hide-xs
hide-sm
hide-md
hide-lg
hide-xl

For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.

hide-xs hides elements when the window width is smaller than or equal to 480px.
hide-sm hides elements when the window width is smaller than or equal to 600px.
hide-md hides elements when the window width is smaller than or equal to 840px.
hide-lg hides elements when the window width is smaller than or equal to 960px.
hide-xl hides elements when the window width is smaller than or equal to 1280px.

	size-xs	size-sm	size-md	size-lg	size-xl
show-xs
show-sm
show-md
show-lg
show-xl

For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.

show-xs shows elements when the window width is smaller than or equal to 480px.
show-sm shows elements when the window width is smaller than or equal to 600px.
show-md shows elements when the window width is smaller than or equal to 840px.
show-lg shows elements when the window width is smaller than or equal to 960px.
show-xl shows elements when the window width is smaller than or equal to 1280px.

Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.

Responsive Resizer

Navbar

Navbar is a layout container that appears in the header of apps and websites.

The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container.

<header class="navbar">
  <section class="navbar-section">
    <a href="#" class="navbar-brand mr-2">Spectre.css</a>
    <a href="#" class="btn btn-link">Docs</a>
    <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a>
  </section>
  <section class="navbar-section">
    <div class="input-group input-inline">
      <input class="form-input" type="text" placeholder="search">
      <button class="btn btn-primary input-group-btn">Search</button>
    </div>
  </section>
</header>

You can use navbar-center class to have a centered section.

<header class="navbar">
  <section class="navbar-section">
    <a href="#" class="btn btn-link">Docs</a>
    <a href="#" class="btn btn-link">Examples</a>
  </section>
  <section class="navbar-center">
    <!-- centered logo or brand -->
  </section>
  <section class="navbar-section">
    <a href="#" class="btn btn-link">Twitter</a>
    <a href="#" class="btn btn-link">GitHub</a>
  </section>
</header>

Components

Accordions

Accordions are used to toggle sections of content.

Elements

Layout

Components

Elements

Layout

Components

<!-- standard Accordions example -->
<div class="accordion">
  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
  <label class="accordion-header">
    <i class="icon icon-arrow-right mr-1"></i>
    Title
  </label>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</div>

<!-- mutually exclusive Accordions example (with same input names) -->
<div class="accordion">
  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
  <label class="accordion-header">
    Title
  </label>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</div>

Alternatively, you can use details and summary instead of input radio or checkbox trick. Add the open attribute to details to expand it. Microsoft Edge support is in development.

<!-- details and summary Accordions example -->
<details class="accordion" open>
  <summary class="accordion-header">
    <i class="icon icon-arrow-right mr-1"></i>
    Title
  </summary>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</details>

Avatars

Avatars are user profile pictures.

Add the avatar class to <amp-img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.

For users who don't have profile pictures, you may use their initials for avatars. Add the avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar.

<!-- Basic avatar examples -->
<figure class="avatar avatar-xl">
  <amp-img src="img/avatar-1.png" alt="...">
</figure>

<figure class="avatar avatar-xl">
  <amp-img src="img/avatar-1.png" alt="...">
  <amp-img src="img/avatar-5.png" class="avatar-icon" alt="...">
</figure>

<figure class="avatar avatar-xl" data-initial="YZ"></figure>

<!-- Show initals when avatar image is unavailable or not fully loaded -->
<figure class="avatar avatar-xl" data-initial="YZ">
  <amp-img src="img/avatar-1.png" alt="...">
</figure>

Avatars support presence indicators. You can add an i element with the avatar-presence class, and add online, busy or away class for different status colors. The default is gray which means offline.

<figure class="avatar avatar-xl">
  <amp-img src="img/avatar-1.png" alt="...">
  <i class="avatar-presence online"></i>
</figure>

Badges

Badges are often used as unread number indicators.

Notifications

Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element.

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

Badges support button and avatars elements as well.

<span class="badge">
  Notifications
</span>

<span class="badge" data-badge="8">
  Notifications
</span>

<button class="btn badge" data-badge="8">
  Button
</button>

<figure class="avatar badge" data-badge="8" data-initial="YZ">
  <amp-img src="img/avatar-3.png" alt="YZ">
</figure>

Bars

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 progress, meter and input range elements.

Add a container element with the bar class. And add child elements with the bar-item class. The width percentage value is needed for every bar-item.

There is the bar-sm class for thinner Bars. Also, you could use Tooltips for any bar-item.

<div class="bar bar-sm">
  <div class="bar-item" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- multi-bars -->
<div class="bar">
  <div class="bar-item tooltip" data-tooltip="25%" style="width: 25%;">25%</div>
  <div class="bar-item" style="width: 15%;">15%</div>
</div>

Slider bars

You can add the bar-slider class to the Bars container. And add child elements with the bar-item class and bar-slider-btn inside bar-item. You need to set the bar-item width manually to have the slider point.

If there are two bar-item divs in one bar-slider, you will have a range slider.

<!-- slider -->
<table class="bar bar-slider">
  <td class="bar-item" role="progressbar" width="25%">
    <button class="bar-slider-btn btn" role="slider"></button>
  </td>
</table>

<!-- range slider -->
<table class="bar bar-slider">
  <td class="bar-item" role="progressbar" width="15%">
    <button class="bar-slider-btn btn" role="slider"></button>
  </td>
  <td class="bar-item" role="progressbar" width="65%">
    <button class="bar-slider-btn btn" role="slider"></button>
  </td>
</table>

Breadcrumbs

Breadcrumbs are used as navigational hierarchies to indicate current location.

Add a container element with the breadcrumb class. And add child elements with the breadcrumb-item class.

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Settings</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Change avatar</a>
  </li>
</ul>

Cards

Cards are flexible content containers.

Microsoft

Software and hardware

Empower every person and every organization on the planet to achieve more.

Apple

Hardware and software

To make a contribution to the world by making tools for the mind that advance humankind.

Google I/O

Software and hardware

An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.

Buy Share

Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.

Apple

Hardware and software

To make a contribution to the world by making tools for the mind that advance humankind.

Google

Software and hardware

Organize the world’s information and make it universally accessible and useful.

Search Share

Add a container element with the card class. And add child elements with the card-image, card-header, card-body and/or card-footer classes. The card-image can be placed in any position.

<div class="card">
  <div class="card-image">
    <amp-img src="img/osx-el-capitan.jpg" class="img-responsive">
  </div>
  <div class="card-header">
    <div class="card-title h5">Microsoft</div>
    <div class="card-subtitle text-gray">Software and hardware</div>
  </div>
  <div class="card-body">
    Empower every person and every organization on the planet to achieve more.
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Do</button>
  </div>
</div>

Chips

Chips are complex entities in small blocks.

Crime Drama Biography Mystery

Tony Stark

Thor Odinson

Steve Rogers

Add a container element with the chip class. And add child text element, buttons or avatars with the avatar class.

<span class="chip">Crime</span>

<span class="chip">
  Biography
  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>

<div class="chip">
  <amp-img src="img/avatar-1.png" class="avatar avatar-sm">
  Yan Zhu
  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</div>

Empty states

Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

You have no new messages

Click the button to start a conversation

You've successfully signed up

Click the button to invite your friends

You are not following anyone

Start to meet new friends

An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

<div class="empty">
  <div class="empty-icon">
    <i class="icon icon-check"></i>
  </div>
  <p class="empty-title h5">You have no new messages</p>
  <p class="empty-subtitle">Click the button to start a conversation.</p>
  <div class="empty-action">
    <button class="btn btn-primary">Send a message</button>
  </div>
</div>

Menus

Menus are vertical list of links or buttons for actions and navigation.

Steve Rogers
2
My profile
Settings
Logout

form-checkbox
form-radio
form-switch

Add a container element with the menu class. And add child elements with the menu-item class. You can separate menu items with a divider. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.

Menus also have Form controls (checkbox, radio and checkbox) support.

<ul class="menu">
  <!-- menu header text -->
  <li class="divider" data-content="LINKS">
  </li>
  <!-- menu item standard -->
  <li class="menu-item">
    <a href="#">
      <i class="icon icon-check"></i> Slack
    </a>
  </li>
  <!-- menu item with form control -->
  <li class="menu-item">
    <label class="form-checkbox">
      <input type="checkbox">
      <i class="form-icon"></i> form-checkbox
    </label>
  </li>
  <!-- menu divider -->
  <li class="divider"></li>
  <!-- menu item with badge -->
  <li class="menu-item">
    <div class="menu-badge">
      <label class="label label-primary">2</label>
    </div>
    <a href="#">
      <i class="icon icon-check"></i> Settings
    </a>
  </li>
</ul>

Dropdown menus

The dropdown is a combination of buttons and menus.

Dropdown menus component is built entirely in CSS. It is triggered by :focus event.

Add a container element with the dropdown class. And add a focusable element with the dropdown-toggle class for the button and a menu component right next to it. You also need to add tabindex to make the buttons focusable.

If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.

Also, you can implement your JS to interact with the dropdown menus by adding the active class to the dropdown container.

<!-- basic dropdown button -->
<div class="dropdown">
  <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
    dropdown menu <i class="icon icon-arrow-down"></i>
  </a>
  <!-- menu component -->
  <ul class="menu">
    ...
  </ul>
</div>

<!-- dropdown button group -->
<div class="dropdown">
  <div class="btn-group">
    <a href="#" class="btn">
      dropdown button
    </a>
    <a href="#" class="btn dropdown-toggle" tabindex="0">
      <i class="icon icon-arrow-down"></i>
    </a>

    <!-- menu component -->
    <ul class="menu">
      ...
    </ul>
  </div>
</div>

Modals

Modals are flexible dialog prompts.

Open Modal

Add a container element with the modal class. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the modal-header, modal-body and modal-footer - any or all of them.

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the active class to the modal container.

<div class="modal active" id="modal-id">
  <a href="#close" class="modal-overlay" aria-label="Close"></a>
  <div class="modal-container">
    <div class="modal-header">
      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
      <div class="modal-title h5">Modal title</div>
    </div>
    <div class="modal-body">
      <div class="content">
        <!-- content here -->
      </div>
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>

Modal sizes

Open small size Modal

Use the modal-sm class for a smaller modal dialog. The container max width is 320px.

Open large size Modal

Use the modal-lg class for a full size modal. The container max width is 960px.

<div class="modal modal-sm">
  <a href="#close" class="modal-overlay" aria-label="Close"></a>
  <div class="modal-container">
    <!-- modal structure here -->
  </div>
</div>

Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.

<ul class="nav">
  <li class="nav-item">
    <a href="#">Elements</a>
  </li>
  <li class="nav-item active">
    <a href="#">Layout</a>
    <ul class="nav">
      <li class="nav-item">
        <a href="#">Flexbox grid</a>
      </li>
      <li class="nav-item">
        <a href="#">Responsive</a>
      </li>
      <li class="nav-item">
        <a href="#">Navbar</a>
      </li>
      <li class="nav-item">
        <a href="#">Empty states</a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a href="#">Components</a>
  </li>
  <li class="nav-item">
    <a href="#">Utilities</a>
  </li>
</ul>

Pagination

Add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted. You can add the disabled to the page-item to have unclickable page links.

<ul class="pagination">
  <li class="page-item disabled">
    <a href="#" tabindex="-1">Previous</a>
  </li>
  <li class="page-item active">
    <a href="#">1</a>
  </li>
  <li class="page-item">
    <a href="#">2</a>
  </li>
  <li class="page-item">
    <a href="#">3</a>
  </li>
  <li class="page-item">
    <span>...</span>
  </li>
  <li class="page-item">
    <a href="#">12</a>
  </li>
  <li class="page-item">
    <a href="#">Next</a>
  </li>
</ul>

Previous

Getting started
Next

Layout

You could use previous and next pagination to navigate.

<ul class="pagination">
  <li class="page-item page-prev">
    <a href="#">
      <div class="page-item-subtitle">Previous</div>
      <div class="page-item-title h5">Getting started</div>
    </a>
  </li>
  <li class="page-item page-next">
    <a href="#">
      <div class="page-item-subtitle">Next</div>
      <div class="page-item-title h5">Layout</div>
    </a>
  </li>
</ul>

Panels

Panels are flexible view container with auto-expand content section.

Bruce Banner

THE HULK

E-mail

bruce.banner@hulk.com

Skype

bruce.banner

Location

Dayton, Ohio

Comments

Thor Odinson

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Bruce Banner

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Tony Stark

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Steve Rogers

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Natasha Romanoff

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable.

<div class="panel">
  <div class="panel-header">
    <div class="panel-title">Comments</div>
  </div>
  <div class="panel-nav">
    <!-- navigation components: tabs, breadcrumbs or pagination -->
  </div>
  <div class="panel-body">
    <!-- contents -->
  </div>
  <div class="panel-footer">
    <!-- buttons or inputs -->
  </div>
</div>

Popovers

Popovers are small overlay content containers. Popovers component is built entirely in CSS.

Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container.

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

<div class="popover popover-right">
  <button class="btn btn-primary">right popover</button>
  <div class="popover-container">
    <div class="card">
      <div class="card-header">
        ...
      </div>
      <div class="card-body">
        ...
      </div>
      <div class="card-footer">
        ...
      </div>
    </div>
  </div>
</div>

Steps

Steps are progress indicators of a sequence of task steps.

Step 1
Step 2
Step 3
Step 4

Add a container element with the step class. And add child elements with the step-item class. The step-item with the active class will be highlighted and indicate the current state of progress.

<ul class="step">
  <li class="step-item">
    <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
  </li>
  <li class="step-item active">
    <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
  </li>
  <li class="step-item">
    <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
  </li>
  <li class="step-item">
    <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
  </li>
</ul>

Tabs

Tabs enable quick switch between different views.

Music
Playlists
Radio
Store

Music
Playlists
Radio

Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.

<ul class="tab tab-block">
  <li class="tab-item active" [class]="'tab-item' + (tabs_1 == 1 ? ' active' : '')">
    <a on="tap:AMP.setState({tabs_1: 1})">Music</a>
  </li>
  <li class="tab-item" [class]="'tab-item' + (tabs_1 == 2 ? ' active' : '')">
    <a on="tap:AMP.setState({tabs_1: 2})">Playlists</a>
  </li>
  <li class="tab-item" [class]="'tab-item' + (tabs_1 == 3 ? ' active' : '')">
    <a on="tap:AMP.setState({tabs_1: 3})">Radio</a>
  </li>
  <li class="tab-item" [class]="'tab-item' + (tabs_1 == 4 ? ' active' : '')">
    <a on="tap:AMP.setState({tabs_1: 4})">Connect</a>
  </li>
</ul>

Music
Playlists
Radio

Music
Playlists
Radio

If you need badges on tabs, you can add badge class to the element within tab-item.

<ul class="tab tab-block">
  <li class="tab-item active" [class]="'tab-item' + (tabs_2 == 1 ? ' active' : '')">
    <a class="badge" data-badge="9" on="tap:AMP.setState({tabs_2: 1})">
      Music
    </a>
  </li>
</ul>

Music
Playlists
Radio
Store

You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item.

<ul class="tab">
  <li class="tab-item active" [class]="'tab-item' + (tabs_3 == 1 ? ' active' : '')">
    <a on="tap:AMP.setState({tabs_3: 1})">
      Music
    </a>
  </li>
  <li class="tab-item tab-action">
    <div class="input-group input-inline">
      <input class="form-input input-sm" type="text" placeholder="search">
      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
    </div>
  </li>
</ul>

Tiles

Tiles are repeatable or embeddable information blocks.

The Avengers

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

The S.H.I.E.L.D.

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Add a container with the tile class. And add child elements with the tile-icon, tile-content or/and tile-action classes. The tile-icon and tile-action are optional.

There are tile-title and tile-subtitle classes for title and subtitle text styles.

<div class="tile">
  <div class="tile-icon">
    <div class="example-tile-icon">
      <i class="icon icon-file centered"></i>
    </div>
  </div>
  <div class="tile-content">
    <p class="tile-title">The Avengers</p>
    <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
  </div>
  <div class="tile-action">
    <button class="btn btn-primary">Join</button>
  </div>
</div>

Compact tiles

There is compact version of Tiles component, which is often used as contact and file info blocks.

Add the tile-centered class to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.

spectre-docs.pdf

14MB · Public · 1 Jan, 2017

<div class="tile tile-centered">
  <div class="tile-icon">
    <div class="example-tile-icon">
      <i class="icon icon-file centered"></i>
    </div>
  </div>
  <div class="tile-content">
    <div class="tile-title">spectre-docs.pdf</div>
    <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
  </div>
  <div class="tile-action">
    <button class="btn btn-link">
      <i class="icon icon-more-vert"></i>
    </button>
  </div>
</div>

Toasts

Toasts are used to show alert or information to users.

Toast Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Add a container element with the toast class. You can add any text within the container, and even icons. You may also add a close button with the btn-clear class if you need.

Toast success

Toast warning

Toast error

And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.

<div class="toast" id="toast_1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="toast toast-primary">
  <button class="btn btn-clear float-right" on="tap:toast_1.hide"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Tooltips

Tooltips provide context information labels that appear on hover and focus.

Tooltips component is built entirely in CSS.

Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements. And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. By default, the tooltip appears above the element.

<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>

Utilities

Color utilities

Color utilities are used for changing colors for text, link and background.

Text colors

primary color

secondary color

dark color

gray color

light color

success color

warning color

error color

<span class="text-primary">primary color</span>
<span class="text-secondary">secondary color</span>
<span class="text-dark">dark color</span>
<span class="text-gray">gray color</span>
<span class="text-light">light color</span>
<span class="text-success">success color</span>
<span class="text-warning">warning color</span>
<span class="text-error">error color</span>

<a class="text-primary" href="#">primary color</a>
<a class="text-secondary" href="#">secondary color</a>
<a class="text-gray" href="#">gray color</a>
<a class="text-light" href="#">light color</a>
<a class="text-success" href="#">success color</a>
<a class="text-warning" href="#">warning color</a>
<a class="text-error" href="#">error color</a>

Background colors

primary bg

secondary bg

dark bg

gray bg

success bg

warning bg

error bg

<div class="bg-primary">primary bg</div>
<div class="bg-secondary">secondary bg</div>
<div class="bg-dark">dark bg</div>
<div class="bg-gray">gray bg</div>
<div class="bg-success">success bg</div>
<div class="bg-warning">warning bg</div>
<div class="bg-error">error bg</div>

Cursor utilities

Cursor utilities specify which mouse cursor to display when mouseover.

c-hand

c-move

c-zoom-in

c-zoom-out

c-not-allowed

c-auto

<!-- cursor: hand; -->
<div class="c-hand"></div>
<!-- cursor: move; -->
<div class="c-move"></div>
<!-- cursor: zoom-in; -->
<div class="c-zoom-in"></div>
<!-- cursor: zoom-out; -->
<div class="c-zoom-out"></div>
<!-- cursor: not-allowed; -->
<div class="c-not-allowed"></div>
<!-- cursor: auto; -->
<div class="c-auto"></div>

Display utilities

Display utilities are used for display and hidden things.

<!-- display: block; -->
<div class="d-block"></div>
<!-- display: inline; -->
<div class="d-inline"></div>
<!-- display: inline-block; -->
<div class="d-inline-block"></div>
<!-- display: flex; -->
<div class="d-flex"></div>
<!-- display: inline-flex; -->
<div class="d-inline-flex"></div>
<!-- display: none; -->
<div class="d-none"></div>
<div class="d-hide"></div>
<!-- visibility: visible; -->
<div class="d-visible"></div>
<!-- visibility: hidden; -->
<div class="d-invisible"></div>
<!-- hide text contents -->
<div class="text-hide"></div>
<!-- assistive text for screen reader -->
<div class="text-assistive"></div>

Divider

A Divider is used for separating elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.

<!-- divider element -->
<div class="divider"></div>
<!-- divider element with text -->
<div class="divider text-center" data-content="OR"></div>

<!-- vertical divider element with text -->
<div class="columns">
  <div class="column">
    <!-- column content -->
  </div>
  <div class="divider-vert" data-content="OR"></div>
  <div class="column">
    <!-- column content -->
  </div>
</div>

Loading

Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status.

Add the loading-lg class for large size.

<!-- loading element -->
<div class="loading"></div>
<div class="loading loading-lg"></div>

Position utilities

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

<!-- clear float -->
<div class="clearfix"></div>
<!-- float: left and right -->
<div class="float-left"></div>
<div class="float-right"></div>
<!-- position: relative, absolute, fixed and sticky -->
<div class="p-relative"></div>
<div class="p-absolute"></div>
<div class="p-fixed"></div>
<div class="p-sticky"></div>
<!-- centered block -->
<div class="p-centered"></div>

<!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
<div class="m-1"></div>
<div class="m-2"></div>
<!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
<div class="mt-1"></div>
<div class="mt-2"></div>
<!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
<div class="mx-1"></div>
<div class="mx-2"></div>
<div class="my-1"></div>
<div class="my-2"></div>
<!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
<div class="p-1"></div>
<div class="p-2"></div>
<!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
<div class="pt-1"></div>
<div class="pt-2"></div>
<!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
<div class="px-1"></div>
<div class="px-2"></div>
<div class="py-1"></div>
<div class="py-2"></div>

Shape utilities

Shape utilities are used for change element shapes.

rounded

circle

<!-- rounded element -->
<div class="s-rounded"></div>
<!-- circle element -->
<div class="s-circle"></div>

Text utilities

Text utilities are used for text alignment, styles and overflow things.

<!-- left-aligned text -->
<div class="text-left"></div>
<!-- center-aligned text -->
<div class="text-center"></div>
<!-- right-aligned text -->
<div class="text-right"></div>
<!-- justified text -->
<div class="text-justify"></div>

<!-- Lowercased text -->
<div class="text-lowercase"></div>
<!-- Uppercased text -->
<div class="text-uppercase"></div>
<!-- Capitalized text -->
<div class="text-capitalize"></div>

<!-- Normal weight text -->
<div class="text-normal"></div>
<!-- Bold text -->
<div class="text-bold"></div>
<!-- Italicized text -->
<div class="text-italic"></div>
<!-- Larger text (120%) -->
<div class="text-large"></div>

<!-- Overflow behavior: display an ellipsis to represent clipped text -->
<div class="text-ellipsis"></div>
<!-- Overflow behavior: truncate the text -->
<div class="text-clip"></div>
<!-- Text may be broken at arbitrary points -->
<div class="text-break"></div>

⚡ AMP Spectre CSS Framework

#Elements

#Typography

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

Paragraphs

Semantic text elements

Optimized for East Asian fonts

Fonts

Blockquote

Lists

#Tables

#Buttons

Button colors

Button sizes

Button states

Button groups

#Forms

Horizontal forms

Form sizes

Form icons

Input types

Input groups

Form validation styles

Form disabled styles

#Icons experimental

Navigation icons

Icon sizes

#Labels

#Codes

#Media

Images

#Layout

#Flexbox grid

Grid offset

Grid nesting

#Responsive

Responsive container

Responsive visibility

#Navbar

#Components

#Accordions

#Avatars

#Badges

#Bars

Slider bars

#Breadcrumbs

#Cards

#Chips

#Empty states

#Menus

#Dropdown menus

#Modals

Lorem ipsum

Cupcake ipsum

Candy ipsum

Modal sizes

Lorem ipsum

Cupcake ipsum

Candy ipsum

#Navs

#Pagination

#Panels

#Popovers

#Steps

#Tabs

#Tiles

Compact tiles

#Toasts

Toast Title

#Tooltips

#Utilities

#Color utilities

Text colors

Background colors

Elements

Typography

Tables

Buttons

Forms

Icons experimental

Labels

Codes

Media

Layout

Flexbox grid

Responsive

Navbar

Components

Accordions

Avatars

Badges

Bars

Breadcrumbs

Cards

Chips

Empty states

Menus

Dropdown menus

Modals

Navs

Pagination

Panels

Popovers

Steps

Tabs

Tiles

Toasts

Tooltips

Utilities

Color utilities

Cursor utilities

Display utilities

Divider

Loading

Position utilities

Shape utilities

Text utilities