MIUN - Design Library

Title: Short 

<h1 class="heading-level-1 mw-730 mx-auto mb-md">Att plugga på distans</h1>
<p class="mw-730 mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ipsa magnam non voluptas esse? Tempora ipsa, officiis dolore expedita exercitationem atque quae enim a eius sed est eaque rerum ut. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Consequuntur exercitationem nulla obcaecati tempore culpa eum, facilis quos accusantium, debitis ea aut laborum repudiandae numquam saepe explicabo doloremque, dicta quod veniam?</p>
 
<h1 class="heading-level-1 mw-730 mx-auto mb-md">{{ text }}</h1>
<p class="mw-730 mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ipsa magnam non voluptas esse? Tempora ipsa, officiis dolore expedita exercitationem atque quae enim a eius sed est eaque rerum ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur exercitationem nulla obcaecati tempore culpa eum, facilis quos accusantium, debitis ea aut laborum repudiandae numquam saepe explicabo doloremque, dicta quod veniam?</p>
 
{
  "text": "Att plugga på distans"
}
  • Content: 
    h1.title {
    max-width: 730px;
    margin: 0 0 $md-space 0;
}
  • URL: /components/raw/title/title.scss
  • Filesystem Path: src\components\01-global_components\title\title.scss
  • Size: 66 Bytes

Global Component - Title (H1)

Variants

  • Default
  • Long

The default variant has shorter text

The long variant has longer text

Markup

Uses bootstrap class="mx-auto" for centering the h1 element in the parent div

Styling

This component both has unique styling with class="title" and shares styling with the <h1></h1> element (styling found in ./src/static/comonents/_font.scss)