Miscellaneous

The link prefix can be used to prepend a '>' to a link.

<a href="#" class="link-prefix">Foobar</a>

Caret to indicate dropdowns.

<span class="caret"></span>

Loading dots.

Loading...
<div>
  Loading<span class="loading-dots"><i>.</i><i>.</i><i>.</i></span>
</div>

Loading mask.

FooBarBaz
<table class="table table--striped">
  <thead>
    <tr><th>Foo</th><th>Bar</th><th>Baz</th></tr>
  </thead>
  <tbody class="loading-mask">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
  </tbody>
</table>

Close button.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Text-alignments.

Text align left
Text align center
Text align right
<div style="width:100%">
  <div class="text-left">Text align left</div>
  <div class="text-center">Text align center</div>
  <div class="text-right">Text align right</div>
</div>

Responsive Helpers

Hide helpers

Hide on md and upwards devices
<div>
  <div class="hidden">Hide everywhere</div>
  <div class="hidden-xs">Hide on xs and upwards devices</div>
  <div class="hidden-sm">Hide on sm and upwards devices</div>
  <div class="hidden-md">Hide on md and upwards devices</div>
  <div class="hidden-lg">Hide on lg and upwards devices</div>
  <div class="hidden-xl">Hide on xl and upwards devices</div>
</div>

Visible helpers

Show on xs and upwards devices
Show on sm and upwards devices
Show on md and upwards devices
Show on lg and upwards devices
Show on xl and upwards devices
<div>
  <div class="visible-xs">Show on xs and upwards devices</div>
  <div class="visible-sm">Show on sm and upwards devices</div>
  <div class="visible-md">Show on md and upwards devices</div>
  <div class="visible-lg">Show on lg and upwards devices</div>
  <div class="visible-xl">Show on xl and upwards devices</div>
</div>

This documentation was generated using Hologram