Vebego Component Library

Heading with Styling 

<h1 class="atm-heading heading-with-styling">
      <i>The quick brown fox</i>
      <strong>jumps over the lazy dog</strong>
  </h1>
 
{{#if topText}}
  <{{tag}} class="atm-heading heading-with-styling{{modifier}}">
    <i>{{topText}}</i>
      {{#if bottomText}}
        <strong>{{bottomText}}</strong>
      {{/if}}
  </{{tag}}>
{{/if}}
 
{
  "tag": "h1",
  "modifier": null,
  "topText": "The quick brown fox",
  "bottomText": "jumps over the lazy dog",
  "text": null
}
  • Content: 
    .atm-heading.heading-with-styling {
    @apply block font-display font-normal mb-4 text-secondary-col-1 text-center;
}

h1.heading-with-styling,
.heading-with-styling.h1 {
    @apply text-h2 md:text-h1;
}

h2.heading-with-styling,
.heading-with-styling.h2 {
    @apply text-h3 md:text-h2;
}

h3.heading-with-styling,
.heading-with-styling.h3 {
    @apply text-h4 md:text-h3;
}

h4.heading-with-styling,
.heading-with-styling.h4 {
    @apply text-h5 md:text-h4;
}

h5.heading-with-styling,
.heading-with-styling.h5 {
    @apply text-h6 md:text-h5;
}

h6.heading-with-styling,
.heading-with-styling.h6 {
    @apply text-h6;
}

.heading-with-styling {
    i,
    strong {
        @apply block text-h1 md:text-[64px] leading-[1.2];
    }
}
  • URL: /components/raw/heading-with-styling/heading-with-styling.css
  • Filesystem Path: src\components\03-molecules\heading-with-styling\heading-with-styling.css
  • Size: 776 Bytes

No notes defined.