@roadtrip/css/styles/base/_typography.css

CSS framework for Roadtrip Design System

/**
 * Typography
 *
 * Typography can help create clear hierarchies,
 * organize information, and guide users through a product or experience.
 *
 * We using Muli as the default font (https://github.com/vernnobile/MuliFont)
 *
 * Index
 * - Display
 * - Headings
 * - Content
 *
 */

/* DISPLAY
 -------------------- */

.display-large{
  font-size: var(--road-display-large);
  font-weight: 700;
  line-height: 1.5;
}

.display-medium{
  font-size: var(--road-display-medium);
  font-weight: 700;
  line-height: 1.5;
}

.display-small{
  font-size: var(--road-display-small);
  font-weight: 700;
  line-height: 1.5;
}

/* HEADINGS
 -------------------- */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h7,
.h8,
.h9 {
  padding: 0;
  font-weight: 700;
  line-height: 1.5;
  color: var(--road-on-surface);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h7,
.h8,
.h9,
.text-content,
.text-small,
.text-legal,
.text-large,
.text-medium
{
  margin: 0 0 1rem;
  font-family: var(--road-font, sans-serif);
}

.h1 {
  font-size: var(--road-heading-01);
}

.h2 {
  font-size: var(--road-heading-02);
}

.h3 {
  font-size: var(--road-heading-03);
}

.h4 {
  font-size: var(--road-heading-04);
}

.h5 {
  font-size: var(--road-font-size-24);
}

.h6 {
  font-size: var(--road-font-size-21);
}

.h7 {
  font-size: var(--road-font-size-18);
}

.h8 {
  font-size: var(--road-font-size-16);
}

.h9 {
  font-size: var(--road-font-size-12);
  text-transform: uppercase;
}

/* SUB HEADINGS
 -------------------- */

.sub-heading-large{
  font-size: var(--road-sub-heading-large);
  font-weight: 700;
  line-height: 1.5;
}

.sub-heading-medium{
  font-size: var(--road-sub-heading-medium);
  font-weight: 700;
  line-height: 1.5;
}

.sub-heading-small{
  font-size: var(--road-sub-heading-small);
  font-weight: 700;
  line-height: 1.5;
}

.overline{
  font-size: var(--road-overline);
  font-weight: 700;
  text-transform: uppercase;
}

/* CONTENT
 -------------------- */

.text-content,
.text-small,
.text-legal,
.text-large,
.text-medium {
  line-height: 1.5;
}

.text-large {
  font-size: var(--road-body-large);
  color: var(--road-grey-10);
}

.text-content {
  font-size: var(--road-body-medium);
  color: var(--road-grey-10);
}

.text-medium {
  font-size: var(--road-body-small);
  color: var(--road-grey-10);
}

.text-small {
  font-size: var(--road-legal-medium);
}

.text-legal {
  font-size: var(--road-legal-medium);
  color: var(--road-grey-60);
}


/* Underline
 -------------------- */

.title-underline::after{
  display: block;
  width: 50px;
  height: 3px;
  margin-top: 8px;
  content: "";
  background-color: var(--road-decorative-surface);
}

.text-center.title-underline::after{
  margin: 8px auto 0;
}

.text-right.title-underline::after{
  position: absolute;
  right: 2rem;
}