4.1 Action card

Action cards are a user hub intended to show a summary of the current status as well as actions that a user might like to address. An action card typically contains links to useful pages and one or more buttons for user actions.

Unless you want a full width card, it's best to place these inside a grid.

<h3 class="card-heading">
    Dashboard
</h3>
<div class="card-section">
    <h4 class="card-heading">
        Orders
    </h4>
    <p><a href="#0"><span class="total total--positive">17</span>orders created in the last 7 days</a>.</p>
    <p><a href="#0"><span class="total">5</span>orders awaiting approval</a>.</p>
    <p><a href="#0" class="button">New order</a></p>
</div>
<div class="card-section">
    <h4 class="card-heading">
        Deliveries
    </h4>
    <p><a href="#0"><span class="total">56</span>deliveries scheduled for today</a>.</p>
    <p><a href="#0"><span class="total total--negative">1</span>late delivery</a>.</p>
    <p><a href="#0" class="button">Receive a delivery</a></p>
</div>

Source: organisms/_action-card.scss, line 1

4.2 Breadcrumbs

Breadcrumbs show a user where their current location fits into the overall structure of the larger site.

<ol class="breadcrumb">
    <li><a href="#0">Bread</a></li>
    <li><a href="#0">Crumbs</a></li>
    <li>Current page</li>
</ol>

Source: molecules/_breadcrumbs.scss, line 1

4.3 Link card

For when you want to show lots of onward links with descriptions to aid comprehension. This is expressed as a description list.

Useful links
Approval levels
Set approval levels for different people in your business
Product list
View and edit the list of products you buy from this supplier
<div class="card-heading">
    Useful links
</div>
<div class="card-body">
<dl>
    <dt><a href="#0">Approval levels</a></dt>
    <dd>Set approval levels for different people in your business</dd>
    <dt><a href="#0">Product list</a></dt>
    <dd>View and edit the list of products you buy from this supplier</dd>
</dl>
</div>

Source: organisms/_link-card.scss, line 1

4.4 Match record

A match record gives an overview of a transaction and should always be full width

<article class="match">
    <header class="grid match__header">
        <h1 class="col-xs-6 col-sm-8 col-grid match__title">
            <a href="#0">Order: PO505</a>
            <div class="match__info">
                <span class="fa fa-calendar" aria-hidden="true"></span> 20 Mar 2018 from Town & country fine foods
            </div>
        </h1>
        <p class="col-xs-6 col-sm-4 match__actions">
            <a href="#0" class="button"><span class="fa fa-search" aria-hidden="true"></span> Inspect</a>
        </p>
    </header>
    <div class="grid">
        <section class="col-xs-auto col-grid match__section">
            <header><h2 class="match__subheading">Purchase</h2></header>
            <table class="match__table">
                <tbody>
                    <tr>
                        <td>
                            <a href="#0">PO505</a>
                        </td>
                        <td class="text-right">
                            20.00 GBP
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="match__status">
                Ordered by <a href="#0" class="match__email">barry@pickles.net</a>
            </p>
            <footer class="match__total">
                Total 20.00 GBP
            </footer>
        </section>
        <section class="col-xs-auto col-grid match__section">
            <header><h2 class="match__subheading">Delivery</h2></header>
            <table class="match__table">
                <tbody>
                    <tr>
                        <td>
                            <a href="#0">21 Mar 2018</a>
                        </td>
                        <td class="text-right">
                            20.00 GBP
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="match__status text-success">
                <span class="fa fa-check"></span> Matches purchase
            </p>
            <footer class="match__total">
                Total 20.00 GBP
            </footer>
        </section>
        <section class="col-xs-auto col-grid match__section">
            <header><h2 class="match__subheading">Invoice</h2></header>
            <table class="match__table">
                <tbody>
                    <tr>
                        <td>
                            <a href="#0">22751014</a>
                        </td>
                        <td class="text-right">
                            20.00 GBP
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="match__status text-success">
                <span class="fa fa-check"></span> Matches delivery
            </p>
            <footer class="match__total">
                Total 20.00 GBP
            </footer>
        </section>
    </div>
    <footer class="match__footer">
        <span class="text-success match__footer-info"><em class="fa fa-check" aria-hidden="true"></em> Approved automatically by <a href="#0">your rules</a></span>
    </footer>
</article>

Source: organisms/_match-record.scss, line 1

4.5 Modal

A modal window is used to present important information above the page. It's also suitable for confirmation dialogs such as "are you sure you want to delete?" The markup for the modal itself lives on the page but is hidden until it's activated. Uses Bootstrap.

<button type="button" data-toggle="modal" data-target="#exampleModal">
    Open example modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
        <h4 class="modal-title" id="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <p>Modal content</p>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal">Close</button>
        <button class="button--primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Source: organisms/_modal.scss, line 1

<nav class="navigation">
    <ul class="navigation__nav">
        <li><a href="#0"><span class="fa fa-history"></span> History</a></li>
        <li><a href="#0">Details</a></li>
        <li class="active"><a href="#0">Active section</a></li>
    </ul>
</nav>

Source: organisms/_navbar.scss, line 1

<nav class="navigation">
    <div class="navigation__nav">
        <form class="navigation__form" action="javascript:void(0);">
            <select id="option" name="option">
                <option value="1">All</option>
                <option value="2">Approved</option>
                <option value="3">Unapproved</option>
            </select>
            <input type="button" value="Filter">
        </form>
        <form class="navigation__form" action="javascript:void(0);">
            <div class="input-button-pair">
                <input name="note" type="text" placeholder="Write a note..."/>
                <input type="button" value="Add note">
            </div>
        </form>
    </div>
    <ul class="navigation__nav">
        <li><a href="#0" class="button button--secondary"><span class="fa fa-copy"></span> Copy</a></li>
        <li><a href="#0" class="button button--warning"><span class="fa fa-trash-o"></span> Delete</a></li>
    </ul>
</nav>

Source: organisms/_navbar.scss, line 406

4.7 Pagination

Pagination is used to break up content into manageable page sizes.

<nav class="pagination">
    <p class="pagination__label">Showing 50 to 100 of 350 results</p>
    <ul class="pagination__list">
        <li class="pagination__previous">
            <a href="#0" rel="prev">Previous</a>
        </li>
        <li>
            <a href="#0">1</a>
        </li>
        <li class="pagination__active">
            2
        </li>
        <li>
            <a href="#0">3</a>
        </li>
        <li>
            <a href="#0">4</a>
        </li>
        <li class="pagination__divider">
            &hellip;
        </li>
        <li>
            <a href="#0">7</a>
        </li>
        <li class="pagination__next">
            <a href="#0" rel="next">Next</a>
        </li>
    </ul>
</nav>

Source: organisms/_pagination.scss, line 1

Default styling

It's a great product. (1kg)

Your SKU
TRZ-142
Supplier SKU
W12-JC
Tags
Beverage Alcohol Gluten

99.99 USD

.product--disabled disabled state

It's a great product. (1kg)

Your SKU
TRZ-142
Supplier SKU
W12-JC
Tags
Beverage Alcohol Gluten

99.99 USD

.product--highlighted a temporary highlighted state animation (refresh page to restart animation)

It's a great product. (1kg)

Your SKU
TRZ-142
Supplier SKU
W12-JC
Tags
Beverage Alcohol Gluten

99.99 USD

<div class="product [modifier class]">
    <div class="product__details">
        <img src="https://placeimg.com/80/80/tech/grayscale" class="product__image">
        <h3 class="product__name">It's a great product. (1kg)</h3>
        <dl class="product__info">
            <dt>Your SKU</dt>
            <dd>TRZ-142</dd>
        </dl>
        <dl class="product__info">
            <dt>Supplier SKU</dt>
            <dd>W12-JC</dd>
        </dl>
        <dl class="product__tags">
            <dt>Tags</dt>
            <dd><span class="badge">Beverage</span> <span class="badge">Alcohol</span> <span class="badge">Gluten</span></dd>
        </dl>
    </div>
    <div class="product__actions">
        <p class="product__price">99.99 USD</p>
        <div class="button-group">
            <a href="#0" class="button button--warning"><span class="fa fa-trash"></span> Delete</a>
            <a href="#0" class="button">Edit</a>
        </div>
    </div>
</div>

Source: organisms/_product-card.scss, line 1

Default styling

.progress-bar-success positive status

.progress-bar-warning negative status

<div class="progress">
    <div class="progress-bar [modifier class]" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width:33%"></div>
</div>

Source: organisms/_progress-bar.scss, line 1

Very insecure
  • Add another word or two. Uncommon words are better.
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width:33%"></div>
</div>
<div class="password-strength insecure">
    <span class="fa fa-times" aria-hidden="true"></span>
    <span>Very insecure</span>
</div>
<div class="password-suggestions alert">
    <ul>
        <li>Add another word or two. Uncommon words are better.</li>
    </ul>
</div>

Source: organisms/_progress-bar.scss, line 50

Our search is powerful.

Some suggestions of things you can search for:

  • A specific document reference id e.g. INV1234
  • Part of a document reference e.g. ABC
  • The name of a supplier
  • The name of a product sold by a supplier
<section class="section section--light">
    <div class="container-fluid">
        <form class="grid justify-center" action="javascript:void(0);">
            <div class="col-sm-8 col-bleed-y">
                <label for="search-section">Search Instasupply</label>
                <input name="q" type="search" id="search-section" required>
            </div>
            <div class="col-sm-8 col-bleed-y">
                <p>
                    <button type="submit" class="pull-right"><span class="fa fa-search"></span> Search</button>
                    Our search is powerful.
                    <a role="button" class="collapsed" data-toggle="collapse" href="#searchInfo" aria-expanded="false" aria-controls="searchInfo">Search suggestions</a>
                </p>
                <div class="collapse" id="searchInfo">
                    <p>Some suggestions of things you can search for:</p>
                    <ul>
                        <li>A specific document reference id e.g. INV1234</li>
                        <li>Part of a document reference e.g. ABC</li>
                        <li>The name of a supplier</li>
                        <li>The name of a product sold by a supplier</li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</section>

Source: organisms/_search-section.scss, line 1

4.11 Sidebar

A fixed position sidebar that collapses off screen on mobile. Intended for use with filtering search results. For a demo, please view the example page

Source: organisms/_sidebar.scss, line 1

<div class="card-heading">
    Your timeline
</div>
<ol class="card-timeline">
    <li class="card-timeline__section">
        <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
            <span class="fa fa-fw fa-file-text-o"></span><span class="fa fa-fw fa-check"></span>
        </span>
        <span class="card-timeline__meta">13 Sep (17:42)</span>
        <p class="card-timeline__info">
            Tesco accepted <a href="#0">order IE-125</a>
        </p>
    </li>
    <li class="card-timeline__section">
        <span class="card-timeline__icon" aria-hidden="true">
            <span class="fa fa-fw fa-file-text-o"></span><span class="fa fa-fw fa-eye"></span>
        </span>
        <span class="card-timeline__meta">14 Sep (12:02)</span>
        <p class="card-timeline__info">
            Tesco viewed <a href="#0">order IE-125</a>
        </p>
    </li>
    <li class="card-timeline__section">
        <span class="card-timeline__icon" aria-hidden="true">
            <span class="fa fa-fw fa-file-text-o"></span><span class="fa fa-fw fa-angle-double-right"></span>
        </span>
        <span class="card-timeline__meta">14 Sep (11:23)</span>
        <p class="card-timeline__info">
            trevor@instasupply.com sent <a href="#0">order IE-125 to Tesco</a>
        </p>
    </li>
    <li class="card-timeline__section">
        <span class="card-timeline__icon card-timeline__icon--warning" aria-hidden="true">
            <span class="fa-stack fa-sm">
                <i class="fa fa-file-o fa-stack-2x"></i>
                <i class="fa fa-gbp fa-stack-1x"></i>
            </span>
            <span class="fa fa-fw fa-close"></span>
        </span>
        <span class="card-timeline__meta">13 Sep (17:42)</span>
        <p class="card-timeline__info">
            trevor@instasupply.com cancelled <a href="#0">order IE-125 to Tesco</a>
        </p>
    </li>
</ol>

Source: organisms/_timeline-card.scss, line 1