Skip to main content
Render a heading and a tagline in a clean, consistent manner.

​
Basic Usage

<div class="ui-titlepair">
  <div class="--title">
    These Are Title Pairs
  </div>
  <div class="--description">
    Which are very useful for labelling new sections
  </div>
</div>

​
Size Modifiers

Use size modifiers to scale up or scale down. The options are .--2xl, .--xl, .--lg, .--md, .--sm, .--xs 
<div class="ui-titlepair --2xl">
  <div class="--title">Michael Scott</div>
  <div class="--description">The best manager at Dunder Mifflin</div>
</div>

​
Variables

--ui-title-pair-color-title: var(--ui-color-grey-900);
--ui-title-pair-color-description: var(--ui-color-grey-500);
--ui-title-pair-font-size-2xl-title: 3rem;
--ui-title-pair-font-size-2xl-description: 1.7rem;
--ui-title-pair-font-size-xl-title: 2.6rem;
--ui-title-pair-font-size-xl-description: 1.6rem;
--ui-title-pair-font-size-lg-title: 2.3rem; 
--ui-title-pair-font-size-lg-description: 1.4rem;
--ui-title-pair-font-size-md-title: 2rem;
--ui-title-pair-font-size-md-description: 1.2em;
--ui-title-pair-font-size-title: 1.8rem;
--ui-title-pair-font-size-description: 1.2rem;
--ui-title-pair-font-size-sm-title: 1.3rem;
--ui-title-pair-font-size-sm-description: 1rem;
--ui-title-pair-font-size-xs-title: 1rem;
--ui-title-pair-font-size-xs-description: 0.9rem;
⌘I