Huesos
Style
Guide

Repositoire

GitHub

Preview

Small

Applies $h6-font-size to small texts, applies a three-step reduction if inside a <h1>, <h2>, <h3> tag.

The helper class .small can be used to fake the element.

It can and will be overriden by some elements as <code>. On these cases, it needs to be applied at every element level down the DOM tree.

Example

<p>Whenever I found a <small>not so important text,</small> i use the small tag</p>
<h1>A big heading with <small>an small portion of text</small></h1>
<h2>A second-level title <small>featuring a minor text</small></h2>
<h3>Any h3 will also feature a <small>reduction on its smaller parts</small></h3>

<!-- You need to excplitly set every element to `.small` -->
<p class="small">I'm a .small text with a <code>code tag</code></p>
<p class="small">I'm a .small text with a <code class="small">.small code tag</code></p>

Assets

  • Filesystem Path: src/components/typography/small/_small.scss
  • Size: 227 Bytes 
  • small,
.small {
	@include ritmo-font-size($h6-font-size);
}

h1 small {
	@include ritmo-font-size($h3-font-size);
}

h2 small {
	@include ritmo-font-size($h4-font-size);
}

h3 small {
	@include ritmo-font-size($h5-font-size);
}