Joran design system

Headings 

<!-- Default -->
<div>Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- Subhead -->
<div class="u-subhead">[SUBHEAD] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- H 1 -->
<div class="u-h1">[H1] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- H 2 -->
<div class="u-h2">[H2] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- H 3 -->
<div class="u-h3">[H3] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- H 4 -->
<div class="u-h4">[H4] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- H 5 -->
<div class="u-h5">[H5] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- H 6 -->
<div class="u-h6">[H6] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- Caption -->
<div class="u-caption">[caption] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<!-- Cta -->
<div class="u-cta">[cta] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.</div>


<div{% if styleModifier %} class="{{ styleModifier }}"{% endif %}>{{ text }}</div>
 
/* Default */
{
  "text": "Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless."
}


/* Subhead */
{
  "text": "[SUBHEAD] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-subhead"
}


/* H 1 */
{
  "text": "[H1] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-h1"
}


/* H 2 */
{
  "text": "[H2] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-h2"
}


/* H 3 */
{
  "text": "[H3] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-h3"
}


/* H 4 */
{
  "text": "[H4] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-h4"
}


/* H 5 */
{
  "text": "[H5] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-h5"
}


/* H 6 */
{
  "text": "[H6] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-h6"
}


/* Caption */
{
  "text": "[caption] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-caption"
}


/* Cta */
{
  "text": "[cta] Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless.",
  "styleModifier": "u-cta"
}
  • Content: 
    /* ======================================================================
 # _utilities.headings.css
 ====================================================================== */

/***
 * Take a look in `tailwind.config.js` for more typography settings
 */


/* -----------------------------------
  # Subhead
  ----------------------------------- */

.u-subhead {
  @extend %subhead;
}

/* -----------------------------------
 # Heanding 1
 ----------------------------------- */

.u-h1 {
  @extend %h1;
}

/* -----------------------------------
 # Heanding 2
 ----------------------------------- */

.u-h2 {
  @extend %h2;
}

/* -----------------------------------
 # Heanding 3
 ----------------------------------- */

.u-h3 {
  @extend %h3;
}

/* -----------------------------------
 # Heanding 4
 ----------------------------------- */

.u-h4 {
  @extend %h4;
}

/* -----------------------------------
 # Heanding 5
 ----------------------------------- */

.u-h5 {
  @extend %h5;
}

/* -----------------------------------
 # Heanding 6
 ----------------------------------- */

.u-h6 {
  @extend %h6;
}

/* -----------------------------------
 # Caption
 ----------------------------------- */

.u-caption {
  @extend %caption;
}

/* -----------------------------------
 # CTA
 ----------------------------------- */

.u-cta {
  @extend %cta;
}
  • URL: /components/raw/headings/_utilities.headings.css
  • Filesystem Path: src/components/02-Utilities/headings/_utilities.headings.css
  • Size: 1.3 KB

No notes defined.