Media
Media is a simple way to display Avatar, Title, and Subtitle.
Usage
import { Media } from 'stwui';
import Media from 'stwui/media';
<script lang="ts">
import { Card, Media } from 'stwui';
</script>
<Card bordered={false}>
<Card.Content slot="content">
<Media>
<Media.Avatar src={avatar} />
<Media.Content>
<Media.Content.Title>Europe Street beat</Media.Content.Title>
<Media.Content.Description>www.instagram.com</Media.Content.Description>
</Media.Content>
</Media>
</Card.Content>
</Card>
Media Slots
| avatar | <Media.Avatar slot="avatar" /> |
| content | <Media.Content slot="content" /> |
| default | |
Media.Avatar Props
| align | 'top' | 'center' | 'bottom' | top |
| src | string | |
| alt | string | avatar |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
| placeholder | boolean | true |
Media.Content Slots
| title | <Media.Content.Title slot="title" /> |
| description | <Media.Content.Description slot="description" /> |
| default | |
Medai.Content.Title Slots
Medai.Content.Description Slots
Media Class Identifiers
| stwui-media |
| stwui-media-avatar-wrapper |
| stwui-media-avatar |
| stwui-media-avatar-placeholder-wrapper |
| stwui-media-avatar-placeholder |
| stwui-media-content |
| stwui-media-content-title |
| stwui-media-content-description |
