Vebego Component Library
<span class="atm-heading h6">The quick brown fox jumps over the lazy dog</span>
{{#if text}}
<{{tag}} class="atm-heading {{modifier}}">{{text}}</{{tag}}>
{{/if}}
{
  "tag": "span",
  "modifier": "h6",
  "text": "The quick brown fox jumps over the lazy dog"
}
  • 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 block font-display font-bold mb-4 text-black;
    }
    
    h1.atm-heading,
    .atm-heading.h1 {
        @apply text-h1;
    }
    
    h2.atm-heading,
    .atm-heading.h2 {
        @apply text-h2;
    }
    
    h3.atm-heading,
    .atm-heading.h3 {
        @apply text-h3;
    }
    
    h4.atm-heading,
    .atm-heading.h4 {
        @apply text-h4;
    }
    
    h5.atm-heading,
    .atm-heading.h5 {
        @apply text-h5;
    }
    
    h6.atm-heading,
    .atm-heading.h6 {
        @apply text-h6;
    }
    
    .atm-heading.h-subtitle {
        @apply block mb-0 font-display font-semibold text-subtitle text-cta;
    }
    
  • URL: /components/raw/heading/heading.css
  • Filesystem Path: src\components\02-atoms\heading\heading.css
  • Size: 750 Bytes

No notes defined.