Styleguide

4 - Organisms

4.1 - Embed

For the responsive display of embedded videos e.g. youtube. Should ideally be inside a container element.

<div class="embed-container">
	<iframe src="https://www.youtube.com/embed/2InLWDk6FhY" frameborder="0" allowfullscreen></iframe>
</div>
Source: src/organisms/_embed.scss, line 1

4.2 - Grid

We use a customised version of bootstrap grid v4.1.3. Full documentation.

Column 1

Column 2

<section class="container">
    <div class="row d-flex justify-content-around">
        <div class="col-sm-6 col-xl-4">
            <p>Column 1</p>
        </div>
        <div class="col-sm-6 col-xl-4">
            <p>Column 2</p>
        </div>
    </div>
</section>
Source: src/organisms/_bootstrap-grid.scss, line 1

4.3 - Metrics

For displaying key metrics. Can be used in a grid to control layout.

5643

(+54)

Description

<div class="metric">
  <div class="metric__circle metric__circle">
    <span class="metric__circle-icon">
     	<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-chart-line fa-w-16 fa-2x"><path fill="currentColor" d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z" class=""></path></svg>
    </span>
    <h4 class="metric__circle-heading">5643</h4>
  </div>
  <p class="metric__change metric__change--positive">
    (+54)
  </p>
  <h4>Description</h4>
</div>
Source: src/molecules/_metrics.scss, line 1

4.4 - Pagination

To break up large amounts of content into separate pages.

<div class="pagination">
	<p class="pagination__info">Showing 1 to 10 of 134 entries</p>
	<ul class="pagination__list">
		<li class="pagination__active"><a href="#0">1</a></li>
		<li><a href="#0">2</a></li>
		<li><a href="#0">3</a></li>
		<li class="ellipsis">&hellip;</li>
		<li><a href="#0">13</a></li>
		<li><a href="#0">›</a></li>
	</ul>
</div>
Source: src/organisms/_pagination.scss, line 1

4.5 - Progress

For displaying the current page's location in a series of steps

  1. Install
  2. Institution
  3. Account
<ol class="progress">
	<li class="progress__item progress__item--done">Install</li>
	<li class="progress__item progress__item--current">Institution</li>
	<li class="progress__item">Account</li>
</ol>
Source: src/organisms/_progress.scss, line 1

4.6 - Tabs

For the display of small pieces of data such as tags for categorisation of documents or a list of features.

<ul class="tabs">
  <li class="tabs__item tabs__item--active">
    <a class="tabs__link" href="#0">Insights</a>
  </li>
  <li class="tabs__item">
    <a class="tabs__link" href="#0">Trends</a>
  </li>
  <li class="tabs__item">
    <a class="tabs__link" href="#0">Raw data</a>
  </li>
</ul>
Source: src/organisms/_tabs.scss, line 1

4.7 - Tooltips

For the display of low amounts of contextual info. Ideally, a link or a button should accurately communicate the action that will occur when it is clicked. Where more context is required, a small amount of text in a tooltip can be useful.

button tooltip
<a href="#0" class="button tooltip" data-tooltip="Export a .ris file which is compatible with EndNote, Mendeley, and Zotero">button tooltip</a><br>
Source: src/organisms/_tooltips.scss, line 1