Media

Media is a simple way to display Avatar, Title, and Subtitle.

Europe Street beat

www.instagram.com

svelte

<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>

Europe Street beat

www.instagram.com

svelte

<script lang="ts">
	import { Card, Media } from 'stwui';
</script>

<Card bordered={false}>
   <Card.Content slot="content">
      <Media>
         <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

Media.Content Slots

title	<Media.Content.Title slot="title" />
description	<Media.Content.Description slot="description" />
default

Medai.Content.Title Slots

default

Medai.Content.Description Slots

default