Vebego Component Library

Author 

<div class="mol-author">
    <div>
        <picture class="atm-image ">
            <img class="" src="https://placehold.co/48x48" alt="">
        </picture>
    </div>
    <div class="info">
        <span class="authorname">Annabel Janssen</span>
        <span class="subtitle">Expert kantoorcoach</span>
    </div>
</div>
 
<div class="mol-author">
    <div>
        {{ render '@image' image }}
    </div>
    <div class="info">
        <span class="authorname">{{ authorname }}</span>
        <span class="subtitle">{{ subtitle }}</span>
    </div>
</div>
 
{
  "authorname": "Annabel Janssen",
  "subtitle": "Expert kantoorcoach",
  "image": {
    "src": "https://placehold.co/48x48"
  }
}
  • Content: 
    .mol-author
{
    @apply flex;
    @apply items-center;

    .atm-image
    {
        clip-path: circle(50%);
        @apply mr-4;
        @apply mb-0;
    }

    .info
    {
        @apply flex;
        @apply flex-col;

        .authorname
        {
            @apply font-bold;
            @apply text-md;
            @apply text-gray-900;
        }

        .subtitle
        {
            @apply text-xs;
            @apply tracking-widest;
        }
    }
}
  • URL: /components/raw/author/author.css
  • Filesystem Path: src\components\03-molecules\author\author.css
  • Size: 496 Bytes

No notes defined.