Vebego Component Library

Heading 

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


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


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


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


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


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


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


<!-- Heading 1 displayed as Heading 6 -->
<h1 class="atm-heading h6">The quick brown fox jumps over the lazy dog</h1>


<!-- Span displayed as Heading 6 -->
<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}}
 
/* H1 (Default) */
{
  "tag": "h1",
  "modifier": null,
  "text": "The quick brown fox jumps over the lazy dog"
}


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


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


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


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


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


/* Subtitle */
{
  "tag": "span",
  "modifier": "h-subtitle",
  "text": "The quick brown fox jumps over the lazy dog"
}


/* Heading 1 displayed as Heading 6 */
{
  "tag": "h1",
  "modifier": "h6",
  "text": "The quick brown fox jumps over the lazy dog"
}


/* Span displayed as Heading 6 */
{
  "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.