logo-icon
STWUI

Media

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