Version:

Install ​

shell
npm i @mate-vue/card

Import ​

vue
<script setup>
import { MateCard } from '@mate-vue/card';
</script>

Variants ​

No media ​

html
<MateCard>
    <div slot="title">Title</div>
    <div slot="subtitle">Subtitle</div>
    <span slot="header-suffix" theme="badge">Information</span>
    <div>Text content</div>
</MateCard>

No media horizontal ​

html
<MateCard theme="horizontal">
    <div slot="title">Title</div>
    <div slot="subtitle">Subtitle</div>
    <span slot="header-suffix" theme="badge">Information</span>
    <div>Text content</div>
</MateCard>

Cover media ​

html
<MateCard theme="cover-media">
    <div slot="media" class="image"></div>
    <div slot="title">Title</div>
    <div slot="subtitle">Subtitle</div>
    <span slot="header-suffix" theme="badge">Information</span>
    <div>Text content</div>
</MateCard>

Cover media horizontal ​

html
<MateCard theme="cover-media horizontal">
    <div slot="media" class="image"></div>
    <div slot="title">Title</div>
    <div slot="subtitle">Subtitle</div>
    <span slot="header-suffix" theme="badge">Information</span>
    <div>Text content</div>
</MateCard>

Full ​

html
<MateCard theme="cover-media">
    <div slot="media" class="image"></div>
    <img src="/avatar.svg" slot="header-prefix"></img>
    <div slot="title">Title</div>
    <div slot="subtitle">Subtitle</div>
    <span slot="header-suffix" theme="badge">Information</span>
    <div>Text content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <MateButton slot="footer">Button 1</MateButton>
    <MateButton slot="footer">Button 2</MateButton>
    <MateButton slot="footer">Button 3</MateButton>
</MateCard>