Install

npm i @vaadin/card

Import

import '@vaadin/card';

Variants

No media

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

No media horizontal

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

Cover media

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

Cover media horizontal

<vaadin-card 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>
</vaadin-card>

Full

<vaadin-card theme="cover-media">
    <img src="/image.jpg" slot="media"></img>
    <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>
    <vaadin-button slot="footer">Button 1</vaadin-button>
    <vaadin-button slot="footer">Button 2</vaadin-button>
    <vaadin-button slot="footer">Button 3</vaadin-button>
</vaadin-card>