Vebego Component Library

Quote 

<div class="mol-quote">
    <span class="atm-heading h4">The quick brown fox jumps over the lazy dog</span>

    <span class="atm-icon  fas fa-quote-left   "></span>
</div>
 
<div class="mol-quote">
    {{ render '@heading' heading }}
    {{ render '@icon' icon merge=true }}
</div>
 
{
  "heading": {
    "text": "The quick brown fox jumps over the lazy dog",
    "tag": "span",
    "modifier": "h4"
  },
  "icon": {
    "icon": "fa-quote-left",
    "style": "fas"
  }
}
  • Content: 
    .mol-quote {
    @apply bg-primary-100;
    @apply py-8;
    @apply pl-11;
    @apply pr-16;
    @apply relative;

    .atm-heading,
    .atm-icon {
        @apply text-primary-700;
    }

    .atm-heading {
        @apply font-medium;
    }

    .atm-icon {
        @apply absolute;
        @apply -bottom-3;
        @apply right-2;
        font-size: 45px;
    }
}
  • URL: /components/raw/quote/quote.css
  • Filesystem Path: src\components\03-molecules\quote\quote.css
  • Size: 390 Bytes

No notes defined.