UHasselt Component Library

Heading: Heading Subtitle 

<div class="heading heading-subtitle">
    The quick brown fox jumps over the lazy dog
</div>
 
<{{tag}} class="heading {{modifier}}">
    {{{text}}}
</{{tag}}>
 
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "div",
  "modifier": "heading-subtitle"
}
  • Content: 
    h1.heading,
h2.heading,
h3.heading,
h4.heading,
h5.heading,
h6.heading,
.heading.h1,
.heading.h2,
.heading.h3,
.heading.h4,
.heading.h5,
.heading.h6 {
    @apply font-body not-italic font-normal mb-4;

    &:first-letter {
        text-transform: uppercase;
    }

    &.text-red {
        @apply text-red;
    }

    strong {
        font-weight: 400;
    }
}

h1.heading,
.heading.h1 {
    @apply text-h1-mobile md:text-h1 font-bold;
}

h2.heading,
.heading.h2 {
    @apply text-h2-mobile md:text-h2 font-semibold;
}

h3.heading,
.heading.h3 {
    @apply text-h3-mobile md:text-h3 font-semibold;
}

h4.heading,
.heading.h4 {
    @apply text-h4-mobile md:text-h4;
}

h5.heading,
.heading.h5 {
    @apply text-h5-mobile md:text-h5;
}

h6.heading,
.heading.h6 {
    @apply text-h6-mobile md:text-h6;
}

.heading.heading-display {
    @apply text-display-mobile md:text-display font-bold;
}

.heading.heading-subtitle {
    @apply text-h6-mobile md:text-h6 font-bold text-red;
}
  • URL: /components/raw/heading/heading.css
  • Filesystem Path: src\components\02-atoms\heading\heading.css
  • Size: 1 KB

No notes defined.