🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Elevations

View in Pattern Lab

HTML Markup

<ul class="sg-elevations">
    <li class="sg-elevation"><span class="sg-elevationbox hoo-elevation4"></span><span class="sg-label">hoo-elevation4<br />hoo-elevation4<br /></span>
</li>
<li class="sg-elevation"><span class="sg-elevationbox hoo-elevation8"></span><span class="sg-label">hoo-elevation8<br />hoo-elevation8<br /></span>
</li>
<li class="sg-elevation"><span class="sg-elevationbox hoo-elevation16"></span><span class="sg-label">hoo-elevation16<br />hoo-elevation16<br /></span>
</li>
<li class="sg-elevation"><span class="sg-elevationbox hoo-elevation64"></span><span class="sg-label">hoo-elevation64<br />hoo-elevation64<br /></span>
</li>
</ul>
<!--end sg-colors--><small>To add to these items, use Sass variables that start with<code>$color-brand-</code>in<code>./source/css/scss/abstracts/_variables.scss</code></small>

Classes can be used directly:

  • hoo-elevation4 - 4px elevation
  • hoo-elevation8 - 8px elevation
  • hoo-elevation16 - 16px elevation
  • hoo-elevation64 - 64px elevation

Custom use

For custom elevations the base style also provides a mixin:

Elevation only takes unit-less values in this case it uses 32px:

SCSS Imports

Main Component
@n8d/htwoo-core/components/base