Joran design system

Avatar: Responsive 

<img class="c-avatar c-avatar--responsive" src="https://source.unsplash.com/200x200/?face" alt="This is an avatar" itemprop="image">
 
<img class="c-avatar{% if variantModifier %} {{ variantModifier }}{% endif %}{% if styleModifier %} {{ styleModifier }}{% endif %}" src="{{ src }}" alt="{{ alt }}" itemprop="image">
 
{
  "src": "https://source.unsplash.com/200x200/?face",
  "alt": "This is an avatar",
  "variantModifier": "c-avatar--responsive"
}
  • Content: 
    /* ======================================================================
   # _components.avatar.css
   ====================================================================== */

.c-avatar {
  @apply
    inline-block
    rounded-full
    h-24
    w-24
    shadow-md
    bg-primary-600

  ;
}

/* -----------------------------------
 # Variants
 ----------------------------------- */

@screen md {
  .c-avatar.c-avatar--responsive {
    @apply
      h-48
      w-48
    ;
  }
}
  • URL: /components/raw/avatar/_components.avatar.css
  • Filesystem Path: src/components/04-Components/avatar/_components.avatar.css
  • Size: 479 Bytes

No notes defined.