UHasselt Component Library

App Heading 

<!-- Heading H1 (Default) -->
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>


<!-- Heading H2 -->
<h2 class="atm-heading ">The quick brown fox jumps over the lazy dog</h2>


<!-- Heading H3 -->
<h3 class="atm-heading ">The quick brown fox jumps over the lazy dog</h3>


<!-- Heading H4 -->
<h4 class="atm-heading ">The quick brown fox jumps over the lazy dog</h4>


<!-- Heading H5 -->
<h5 class="atm-heading ">The quick brown fox jumps over the lazy dog</h5>


<!-- Heading H6 -->
<h6 class="atm-heading ">The quick brown fox jumps over the lazy dog</h6>


<!-- Heading Display -->
<div class="atm-heading heading-display">The quick brown fox jumps over the lazy dog</div>


<!-- Heading Subtitle -->
<div class="atm-heading heading-subtitle">The quick brown fox jumps over the lazy dog</div>


<{{tag}} class="atm-heading {{modifier}}">{{text}}</{{tag}}>
 
/* Heading H1 (Default) */
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "h1",
  "modifier": ""
}


/* Heading H2 */
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "h2",
  "modifier": ""
}


/* Heading H3 */
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "h3",
  "modifier": ""
}


/* Heading H4 */
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "h4",
  "modifier": ""
}


/* Heading H5 */
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "h5",
  "modifier": ""
}


/* Heading H6 */
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "h6",
  "modifier": ""
}


/* Heading Display */
{
  "text": "The quick brown fox jumps over the lazy dog",
  "tag": "div",
  "modifier": "heading-display"
}


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

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

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

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

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

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

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

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

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

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

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

No notes defined.