Card Cards are used to group and display content in a way that is easily readable.
Usage import { Card } from 'stwui' ;
import Card from 'stwui/card' ; <script lang="ts" >
import { Card } from 'stwui' ;
const cog = "svg-path" ;
const plus_circle = "svg-path" ;
</script>
<Card >
<Card.Header slot ="header" > Card Header</Card.Header >
<Card.Cover slot ="cover" >
<img
src ="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-12.jpg"
alt ="cover"
class ="object-cover object-center w-full aspect-1 h-[300px]"
/>
</Card.Cover >
<Card.Content slot ="content" > Card Content</Card.Content >
<Card.Footer slot ="footer" > Card Footer</Card.Footer >
<Card.Actions slot ="actions" >
<Card.Actions.Action >
<Card.Actions.Action.Icon data ={cog} slot ="icon" />
</Card.Actions.Action >
<Card.Actions.Action >
<Card.Actions.Action.Icon data ={plus_circle} slot ="icon" />
</Card.Actions.Action >
</Card.Actions >
</Card > <script lang="ts" >
import { Card } from 'stwui' ;
</script>
<Card >
<Card.Cover slot ="cover" >
<img
src ="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-12.jpg"
alt ="cover"
class ="object-cover object-center w-full aspect-1 h-[300px]"
/>
</Card.Cover >
</Card > With Cover and Overlay Preview
Code
<script lang="ts" >
import { Card } from 'stwui' ;
</script>
<Card >
<Card.Cover slot ="cover" >
<img
src ="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-12.jpg"
alt ="cover"
class ="object-cover object-center w-full aspect-1 h-[300px]"
/>
<Card.Cover.Overlay class ="top-[unset] h-24" >
<Media class ="absolute bottom-0 left-0 right-0 px-4 py-5" >
<Media.Content >
<Media.Content.Title > Europe Street beat</Media.Content.Title >
<Media.Content.Description > www.instagram.com</Media.Content.Description >
</Media.Content >
</Media >
</Card.Cover.Overlay >
</Card.Cover >
</Card > With Cover and Content Preview
Code
<script lang="ts" >
import { Card } from 'stwui' ;
</script>
<Card class ="max-w-[400px] m-auto" >
<Card.Cover slot ="cover" >
<img
src ="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-12.jpg"
alt ="cover"
class ="object-cover object-center w-full h-[300px] aspect-1"
/>
</Card.Cover >
<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 > Bordered Prop Preview
Code
<script lang="ts" >
import { Card } from 'stwui' ;
</script>
<Card bordered >
<Card.Content slot ="content" > I borddered!</Card.Content >
</Card > <Card bordered ={false} >
<Card.Content slot ="content" > I don't have a border!</Card.Content >
</Card > Hoverable Prop Preview
Code
<script lang="ts" >
import { Card } from 'stwui' ;
</script>
<Card hoverable >
<Card.Content slot ="content" > I am hoverable!</Card.Content >
</Card > <Card >
<Card.Content slot ="content" > I am not hoverable!</Card.Content >
</Card > <script lang="ts" >
import { Card } from 'stwui' ;
</script>
<Card elevation ="none" >
<Card.Content slot ="content" > elevation="none"</Card.Content >
</Card > <Card elevation ="sm" >
<Card.Content slot ="content" > elevation="sm"</Card.Content >
</Card > <Card elevation ="md" >
<Card.Content slot ="content" > elevation="md"</Card.Content >
</Card > <Card elevation ="lg" >
<Card.Content slot ="content" > elevation="lg"</Card.Content >
</Card > <Card elevation ="xl" >
<Card.Content slot ="content" > elevation="xl"</Card.Content >
</Card > Card Props divided boolean true bordered boolean true hoverable boolean false elevation 'none' | 'sm' | 'md' | 'lg' | 'xl' md
Card Slots header <Card.Header slot="header" /> Copy
cover <Card.Cover slot="cover" /> Copy
content <Card.Content slot="content" /> Copy
default footer <Card.Footer slot="footer" /> Copy
actions <Card.Actions slot="actions" /> Copy
Card.Cover Slots default default <Card.Cover.Overlay /> Copy
Card.Actions Slots default <Card.Actions.Action /> Copy
Card.Actions.Action Slots icon <Card.Actions.Action.Icon slot="icon" /> Copy
label <Card.Actions.Action.Label slot="label" /> Copy
Card.Actions.Action.Icon Props data string (IconData) viewBox string 0 0 24 24 size string 24px width string 24px height string 24px color string currentColor stroke string | undefined fill string currentColor
Card.Actions.Action.Label Slots Card Class Identifiers stwui-card stwui-card-content stwui-card-cover stwui-card-actions stwui-card-actions-action stwui-card-actions-action-label stwui-card-footer stwui-card-header stwui-card-cover-overlay
