SCSS reference / Components

Components

This is most of the stylesheet — one partial per visible UI section of the site, 29 in total.

A component is a decorated, visual piece of the design: it has color, imagery, type treatment and an identity of its own, usually built on top of the section and button objects. Every component page on the left shows the real markup from the template's own 16 pages — not invented examples — alongside the class(es) that control each variant.

Format

Component classes are named plainly for the UI section they belong to, with variants added as a second class on the same element rather than a suffix:

.component-name {}
.component-name .child {}
.component-name.variant {}

/* Example */

.review {}
.review-dark {}
.reply-block {}

Example

A review card (see Reviews) pairs the base .review class with a blockquote and figcaption, and swaps to .review-dark when the same card sits on a dark section instead of the paper skin:

<figure class="review rv">
  <blockquote>…</blockquote>
  <figcaption><b>DANA K.</b> &middot; FURNACE REPLACEMENT</figcaption>
</figure>

Pick a component from the sidebar to see its full variant list.