Descriptive Avatar

Circle Image with description.

Example

Props

    🕹ī¸ standard props
    src
    string
    The source URL of the avatar image.
    undefined
    title
    string
    The title to display in the descriptive avatar.
    undefined
    subtitle
    string
    The subtitle to display in the descriptive avatar.
    undefined
    avatarText
    string
    The fallback text for the avatar if there is no image, defaults to the first two characters of title.
    title?.substring(0, 2).toUpperCase()
    direction
    "row" | "column"
    The direction of the content layout (row or column).
    "row"
    reverse
    boolean
    Whether to reverse the layout direction.
    false
    referrerpolicy
    ReferrerPolicy
    The referrer policy for the avatar image.
    "no-referrer"
    🎨 style props
    --descriptive-avatar-image-gap
    size
    The gap between the avatar image and text.
    8px
    --descriptive-avatar-text-gap
    size
    The gap between the text elements (title, subtitle).
    2px
    --descriptive-avatar-title-font-size
    size
    The font size of the title.
    1.1rem
    --descriptive-avatar-subtitle-font-size
    size
    The font size of the subtitle.
    1rem
    --descriptive-avatar-cursor
    cursor
    The cursor style for the avatar container when it is clickable.
    "pointer"

Slots

    children
    The default slot for rendering additional content inside the avatar container.
    Default content:
    
<div class="flex flex-col text-gapped">
  {#if !!title}
    <div 
      class="font-bold title"
      class:text-start={direction == 'row' && !reverse}
      class:text-center={direction == 'column'}
      class:text-end={direction == 'row' && reverse}
    >{title}</div>
  {/if}
  {#if !!subtitle}
    <div 
      class="subtitle"
      class:text-start={direction == 'row' && !reverse}
      class:text-center={direction == 'column'}
      class:text-end={direction == 'row' && reverse}
    >{subtitle}</div>
  {/if}
</div>

Events

    onclick
    Triggered when the avatar container is clicked.
    AttributeTypeDescription
    eventMouseEventThe click event object.