Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

  • lightweight and clean starting point for your project and prototype
  • flexbox, responsive and mobile-friendly layout
  • carefully designed elements
  • built in useful components and utilities
  • responsive email templates soon

getting started

There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.

Install manually

Download the compiled and minified Spectre CSS file (about 30KB):

Download Spectre.css

Install with NPM
$ npm install spectre.css --save
Install with Bower
$ bower install spectre.css --save

And include it in your website or Web app <head>

<link rel="stylesheet" href="dist/spectre.min.css" />

compiling custom version

Spectre uses Gulp for compiling CSS. You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from spectre.less.

Then, you can build the CSS file from the command line:

  1. Navigate to the root directory of Spectre where you can find package.json file.
  2. Run npm install. NPM will install all dev dependencies as listed in package.json.
  3. When completed, run gulp build to compile LESS to CSS and minify files.
  4. You can find compiled CSS files in /dist directory.

You can watch file changes and rebuild CSS files by using gulp watch.

typography

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

headings

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem
H6 Title 1.6rem
<h1>H1 Title</h1>
<h2>H2 Title <small class="label">4rem</small></h2>
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, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</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>
kanji <ruby>
Strikethrough <s>
Sample <samp>
Text Subscripted <sub>
Text Superscripted <sup>
<time>
Underline <u>
x = y + 2 <var>
optimized for east asian fonts

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

Chinese (Simplified)

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

Chinese (Tranditional)

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

Japanese

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

Korean

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

Use the attribute lang or add the class cjk to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Source
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <cite>- Source</cite>
</blockquote>
lists
  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  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 duration genre release date
The Shawshank Redemption 2h 22min Crime, Drama 14 October 1994 USA
The Godfather 2h 55min Crime, Drama 24 March 1972 USA
Schindler's List 3h 15min Biography, Drama, History 4 February 1994 USA
Se7en 2h 7min Crime, Drama, Mystery 22 September 1995 USA

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

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

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

buttons

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

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

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

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

Add the class disabled or the attribute disabled for a disabled button.

button sizes

Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block 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>

Icons with the class icon can be correctly rendered in each button size.

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

If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block 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 label, input, textarea, select, checkbox, radio and switch.

<form>
    <!-- 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>
    <!-- form radio control -->
    <div class="form-group">
        <label class="form-label">Gender</label>
        <label class="form-radio">
            <input type="radio" name="gender" />
            <i class="form-icon"></i> Male
        </label>
        <label class="form-radio">
            <input type="radio" name="gender" checked />
            <i class="form-icon"></i> Female
        </label>
    </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 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>
    <!-- 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 checkbox control -->
    <div class="form-group">
        <label class="form-checkbox">
            <input type="checkbox" />
            <i class="form-icon"></i> Remember me
        </label>
    </div>
</form>

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

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

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

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

The name is invaild.

The email is available.

The option is invaild.

The option is available.

<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="Name" />
        <p class="form-input-hint">The name is invaild.</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="Name" />
        <p class="form-input-hint">The name is invaild.</p>
    </div>
</form>

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

input groups
slack.com/
@slack.com
slack.com/
slack.com/
@slack.com
slack.com/
slack.com/
@slack.com
slack.com/

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

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

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

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

labels

Labels are formatted text tags for highlighted, informative information.

default label primary label success label danger label

Add the class label to <span> or <small> elements. You can add another class label-primary, label-success and label-danger for a primary colored label.

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

media

Media include responsive images, figures and video classes.

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

You can use the element <figure> for an image with a caption. Add the class figure to <figure> element. The images with the class img-responsive 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

For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" />

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

<div class="video-responsive">
    <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0; width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>

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 class columns to a container with the class container. And add any element you want with classname column 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 class col-gapless to have gapless columns.

col-6 (gapless)
col-6 (gapless)

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

col-8
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>

responsive grid

col-md-6
col-md-3
col-md-3
col-sm-6
col-sm-3
col-sm-3
col-xs-6
col-xs-3
col-xs-3

Spectre provides a neat responsive layout grid system. 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.

  • For window width less than 480px, all columns will show as a single row.
  • 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.
<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>

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.

Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory /tools/resizer or online.

Responsive Resizer

empty states / blank slates

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 are not following anyone

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

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

avatars

Avatars are user profile pictures.

Add the class avatar to <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 class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.

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

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

<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure>

<!-- Show initals when avatar image is unavailable or not fully loaded -->
<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
    <img src="img/avatar-1.png" />
</figure>

chips

Chips are complex entities in small blocks.

Crime
Drama
Biography
Mystery
Tony Stark
Thor Odinson
Steve Rogers

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

Tony Stark
Iron man
<div class="chip-sm">
    Crime
    <button class="btn btn-clear"></button>
</div>

<div class="chip-sm">
    <img src="img/avatar-1.png" class="avatar" />
    Yan Zhu
    <button class="btn btn-clear"></button>
</div>

autocomplete

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

Tony Stark
Thor Odinson
Steve Rogers
Bruce Banner
Natasha Romanoff
Tony Stark
Thor Odinson
Steve Rogers
Bruce Banner
Natasha Romanoff
Bruce Banner
Thor Odinson

Add a container element with the class form-autocomplete. There are 2 parts of it, one is form-autocomplete-input, another is menu component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete.

The autocomplete HTML structure is exampled below.

<div class="form-autocomplete">
    <!-- autocomplete input container -->
    <div class="form-autocomplete-input">
        <!-- autocomplete chips -->
        <div class="chip-sm">
            <img src="img/avatar-1.png" class="avatar" />
            Yan Zhu
            <button class="btn btn-clear"></button>
        </div>
        <div class="chip-sm selected">
            <img src="img/avatar-2.png" class="avatar" />
            Yan Zhu
            <button class="btn btn-clear"></button>
        </div>
        <!-- autocomplete real input box -->
        <input class="form-input" type="text" placeholder="typing here" />
    </div>
    <!-- autocomplete suggestion list -->
    <ul class="menu">
        <!-- menu list chips -->
        <li class="menu-item">
            <a href="#">
                <div class="chip">
                    <div class="chip-icon">
                        <img src="img/avatar-4.png" class="avatar" />
                    </div>
                    <div class="chip-content">
                        Steve Rogers
                    </div>
                </div>
            </a>
        </li>
        <li class="menu-item">
            <a href="#">
                <div class="chip">
                    <div class="chip-icon">
                        <img src="img/avatar-3.png" class="avatar" />
                    </div>
                    <div class="chip-content">
                        Yan Zhu
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

tooltips

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

Tooltip component is built entirely in CSS.

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left 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>

badges

Badges are often used as unread number indicators.

Notifications
Notifications
Notifications
Notifications

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

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

toasts

Toasts are used to show alert or information to users.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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

<div class="toast toast-primary">
    <button class="btn btn-clear float-right"></button>
    <i class="icon icon-error_outline"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

modals

Modals are flexible dialog prompts.

Add a container element with the class modal. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the class name modal-header, modal-content 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 class active to the modal container

<div class="modal active">
    <div class="modal-overlay"></div>
    <div class="modal-container">
        <div class="modal-header">
            <button class="btn btn-clear float-right"></button>
            <div class="modal-title">Modal title</div>
        </div>
        <div class="modal-body">
            <div class="content">
                <!-- content here -->
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-link">Close</button>
            <button class="btn btn-primary">Share</button>
        </div>
    </div>
</div>
modal sizes

Add the class modal-sm for a smaller modal dialog.

<div class="modal modal-sm">
    <div class="modal-overlay"></div>
    <div class="modal-container">
        <!-- modal structure here -->
    </div>
</div>

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

Software and hardware
Organize the world’s information and make it universally accessible and useful.
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 I/O

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

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

<div class="card">
    <div class="card-image">
        <img src="img/osx-el-capitan.jpg" class="img-responsive" />
    </div>
    <div class="card-header">
        <h4 class="card-title">Microsoft</h4>
        <h6 class="card-meta">Software and hardware</h6>
    </div>
    <div class="card-body">
        To make a contribution to the world by making tools for the mind that advance humankind.
    </div>
    <div class="card-footer">
        <button class="btn btn-primary">Do</button>
    </div>
</div>

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 and fixed -->
<div class="rel"></div>
<div class="abs"></div>
<div class="fixed"></div>
<!-- centered block -->
<div class="centered"></div>
<!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; -->
<div class="mt-10"></div>
<div class="mt-5"></div>
<!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
<div class="pt-10"></div>
<div class="pt-5"></div>

Display utilities are used for display and hidden things.

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

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>

Shape utilities are used for change element shapes.

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

A Divider is used for separating elements.

<!-- divider element -->
<div class="divider"></div>

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

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