Huesos
Style
Guide

Repositoire

GitHub

Preview

Minititle

The (opinionated) concept of “minititle” makes reference to a small heading, normally used for sectioning. Read more on the minititle() mixin docs.

The helper .minititle class applies the mixin defaults: reduces the text size and then augments its visual weight by using a combination of a bold weight, an uppercase text-transform and a greater letter-spacing.

If you need to tweak the values, use the minititle() mixin instead.

Example

<section>
    <p class="minititle">This is the minititle of this section</p>
    <p>A normal text. As we said before, the minititle gives visual weight while using a small font-size</p>
</section>
<section class="card half-gutter" style="width:450px">
    <h3 class="minititle">An h3 reduced!</h3>
    <p class="m0">You can use your <em>minititle</em> on <code>heading</code> elements and maintain the semantics while reducing the font-size</p>
</section>

Assets

  • Filesystem Path: src/components/typography/minititle/_minititle.scss
  • Size: 37 Bytes
  • Content:
    .minititle {
    	@include minititle();
    }