Components - Spectre.css

Autocomplete

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

Bruce Banner

Thor Odinson

Steve Rogers Tony Stark 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. You may add the class is-focused to form-autocomplete-input to make it appear as focus state.

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 form-input">

    <!-- autocomplete chips -->
    <label class="chip">
      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson" />
      Thor Odinson
      <button class="btn btn-clear"></button>
    </label>

    <!-- 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="tile tile-centered">
          <div class="tile-icon">
            <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
          </div>
          <div class="tile-content">
            Steve Rogers
          </div>
        </div>
      </a>
    </li>
    <li class="menu-item">
      <a href="#">
        <div class="tile tile-centered">
          <div class="tile-icon">
            <img src="img/avatar-3.png" class="avatar avatar-sm" alt="Yan Zhu" />
          </div>
          <div class="tile-content">
            Yan Zhu
          </div>
        </div>
      </a>
    </li>
  </ul>
</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>

Badges

Badges are often used as unread number indicators.

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.

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

Badges support button elements as well.

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

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

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

Bars

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

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

There is a class bar-sm 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>

<div class="bar">
  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
  <div class="bar-item" style="width:15%;background:#818BD5;">15%</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.

Search Share

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 I/O

Software and hardware

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>

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. And add child text element, buttons or avatars with the class avatar.

<label class="chip">
  Crime
  <button class="btn btn-clear"></button>
</label>

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

Dropdowns

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 class dropdown. And add a focusable element with the classname dropdown-toggle for the button and a menu component right next to it. If the dropdown is close to the right edge of the browser, you can add the class dropdown-right to the container to prevent it appearing off screen.

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

<!-- basic dropdown button -->
<div class="dropdown">
  <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
    dropdown menu <i class="icon-caret"></i>
  </a>
  <!-- menu component -->
  <ul class="menu">
    <li class="menu-item">
      <a href="#">Slack</a>
    </li>
    <li class="menu-item">
      <a href="#">Hipchat</a>
    </li>
  </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-caret"></i>
    </a>

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

Menus

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

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

<ul class="menu">
  <!-- menu header -->
  <li class="menu-header">
    <span class="menu-header-text">
      Go to
    </span>
  </li>
  <!-- menu item -->
  <li class="menu-item">
    <a href="#">
      <i class="icon icon-link"></i> Slack
    </a>
  </li>
  <li class="menu-item">
    <a href="#">
      <i class="icon icon-link"></i> Hipchat
    </a>
  </li>
  <li class="menu-item">
    <a href="#">
      <i class="icon icon-link"></i> Skype
    </a>
  </li>
  <!-- menu divider -->
  <li class="divider"></li>
  <li class="menu-item">
    <a href="#">
      <i class="icon icon-link"></i> Settings
    </a>
  </li>
</ul>

Modals

Modals are flexible dialog prompts.

Open Modal

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>

Navigation

Navigation includes several components, including breadcrumbs, tabs, pagination and navs.

Breadcrumbs

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

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

Music
Playlists
Radio

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

<ul class="tab tab-block">
  <li class="tab-item active">
    <a href="#">Music</a>
  </li>
  <li class="tab-item">
    <a href="#" class="active">Playlists</a>
  </li>
  <li class="tab-item">
    <a href="#">Radio</a>
  </li>
  <li class="tab-item">
    <a href="#">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">
    <a href="#" class="badge" data-badge="9">
      Music
    </a>
  </li>
</ul>

Music
Playlists
Radio
Store

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

<ul class="tab">
  <li class="tab-item active">
    <a href="#">
      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>

Pagination

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

<ul class="pagination">
  <li class="page-item">
    <a href="#" disabled 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="#">
      <p class="page-item-meta">Previous</p>
      <h3 class="page-item-title">Getting started</h3>
    </a>
  </li>
  <li class="page-item page-next">
    <a href="#">
      <p class="page-item-meta">Next</p>
      <h3 class="page-item-title">Layout</h3>
    </a>
  </li>

Navs

Elements
Layout
Components
Utilities

Add a container element with the class nav. And add child elements with the classname nav-item. The nav-item with the class active 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>

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 class step. And add child elements with the classname step-item. The step-item with the class active 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>

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 class tile. And add child elements with the class name tile-icon, tile-content and tile-action. The tile-icon and tile-action are optional.

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

<div class="tile">
  <div class="tile-icon">
    <div class="example-tile-icon">
      <i class="icon icon-explore centered"></i>
    </div>
  </div>
  <div class="tile-content">
    <p class="tile-title">The Avengers</p>
    <p>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>

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

Add the class tile-centered 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-explore centered"></i>
    </div>
  </div>
  <div class="tile-content">
    <div class="tile-title text-ellipsis">spectre-docs.pdf</div>
    <div class="tile-meta text-ellipsis">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.

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.

Toast primary

Toast success

Toast danger

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>

Tooltips

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

Tooltips 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>

Lorem ipsum

Cupcake ipsum

Candy ipsum

Getting started

Layout

Layout

Utilities