Card Svelte Component

Cards, along with List View, is a one more great way to contain and organize your information. Cards contains unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.

Card Svelte component represents Cards component.

Card Components

There are following components included:

Card Properties

PropTypeDefaultDescription
<Card> properties
titlestringCard header content
contentstringCard content
footerstringCard footer content
paddingbooleantrueAdds additional inner padding on card content
outlinebooleanfalseMakes card outline - with border
outlineIosbooleanfalseMakes card outline in iOS theme
outlineMdbooleanfalseMakes card outline in MD theme
raisedbooleanfalseMakes card raised - with shadow
headerDividerbooleanfalseAdds divider (border) for card header
footerDividerbooleanfalseAdds divider (border) for card footer
expandablebooleanfalseEnables expandable card
expandableAnimateWidthbooleanfalseEnables card content width also animatable and responsive, but can affect performance
expandableOpenedbooleanfalseBoolean property indicating whether the expandable card opened or not
animatebooleantrueSpecifies to open expandable card with animation or not
hideNavbarOnOpenbooleanWill hide Navbar on expandable card open. By default inherits same app card parameter.
hideToolbarOnOpenbooleanWill hide Toolbar on expandable card open. By default inherits same app card parameter.
swipeToClosebooleanAllows to close expandable card with swipe. By default inherits same app card parameter.
backdropbooleanEnables expandable card backdrop layer. By default inherits same app card parameter.
backdropElstringAllows to specify custom expandable card backdrop element. This should be a CSS selector of backdrop element, e.g. .card-backdrop.custom-backdrop
closeByBackdropClickbooleanWhen enabled, expandable card will be closed on its backdrop click. By default inherits same app card parameter.
<CardContent> properties
paddingbooleantrueAdds additional inner padding

Card Events

EventDescription
<Card> events
cardBeforeOpenEvent will be triggered right before expandable card starts its opening animation. event.detail.prevent contains function that will prevent card from opening when called
cardOpenEvent will be triggered when expandable card starts its opening animation
cardOpenedEvent will be triggered after expandable card completes its opening animation
cardCloseEvent will be triggered when expandable card starts its closing animation
cardClosedEvent will be triggered after expandable card completes its closing animation

Card Slots

<Card> component has the following slots:

<Card>
  <span slot="header">Header</span>
  <span slot="content">Content</span>
  <span slot="footer">Footer</span>
</Card>

Renders to

<div class="card">
  <div class="card-header">
    <span>Header</span>
  </div>
  <div class="card-content">
    <span>Content</span>
  </div>
  <div class="card-footer">
    <span>Footer</span>
  </div>
</div>

Examples

cards.svelte
<script>
  import {
    Navbar,
    Page,
    Block,
    BlockTitle,
    Card,
    CardHeader,
    CardContent,
    CardFooter,
    List,
    ListItem,
    Link,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<Page>
  <Navbar title="Cards" />

  <Block>
    <p>
      Cards are a great way to contain and organize your information, especially when combined with
      List Views. Cards can contain unique related data, like for example photos, text or links
      about a particular subject. Cards are typically an entry point to more complex and detailed
      information.
    </p>
  </Block>
  <BlockTitle>Simple Cards</BlockTitle>
  <Card
    content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
  />
  <Card
    title="Card header"
    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
    footer="Card footer"
  />
  <Card
    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  />

  <BlockTitle>Outline Cards</BlockTitle>
  <Card
    outline
    content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
  />
  <Card
    outline
    title="Card header"
    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
    footer="Card footer"
  />
  <Card
    outline
    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  />

  <BlockTitle>Outline With Dividers</BlockTitle>
  <Card
    outline
    headerDivider
    footerDivider
    title="Card header"
    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
    footer="Card footer"
  />

  <BlockTitle>Raised Cards</BlockTitle>
  <Card
    raised
    content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
  />
  <Card
    raised
    title="Card header"
    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
    footer="Card footer"
  />
  <Card
    raised
    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  />

  <BlockTitle>Styled Cards</BlockTitle>
  <Card outlineMd class="demo-card-header-pic">
    <CardHeader
      valign="bottom"
      style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
      >Journey To Mountains</CardHeader
    >
    <CardContent>
      <p class="date">Posted on January 21, 2015</p>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis.
        Phasellus quis nibh hendrerit...
      </p>
    </CardContent>
    <CardFooter>
      <Link>Like</Link>
      <Link>Read more</Link>
    </CardFooter>
  </Card>
  <Card class="demo-card-header-pic">
    <CardHeader
      valign="bottom"
      style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
      >Journey To Mountains</CardHeader
    >
    <CardContent>
      <p class="date">Posted on January 21, 2015</p>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis.
        Phasellus quis nibh hendrerit...
      </p>
    </CardContent>
    <CardFooter>
      <Link>Like</Link>
      <Link>Read more</Link>
    </CardFooter>
  </Card>

  <BlockTitle>Cards With List View</BlockTitle>
  <Card>
    <CardContent padding={false}>
      <List>
        <ListItem link="#">Link 1</ListItem>
        <ListItem link="#">Link 2</ListItem>
        <ListItem link="#">Link 3</ListItem>
        <ListItem link="#">Link 4</ListItem>
        <ListItem link="#">Link 5</ListItem>
      </List>
    </CardContent>
  </Card>
  <Card title="New Releases:">
    <CardContent padding={false}>
      <List mediaList>
        <ListItem title="Yellow Submarine" subtitle="Beatles">
          <img
            slot="media"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg"
            width="44"
          />
        </ListItem>
        <ListItem title="Don't Stop Me Now" subtitle="Queen">
          <img
            slot="media"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg"
            width="44"
          />
        </ListItem>
        <ListItem title="Billie Jean" subtitle="Michael Jackson">
          <img
            slot="media"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg"
            width="44"
          />
        </ListItem>
      </List>
    </CardContent>
    <CardFooter>
      <span>January 20, 2015</span>
      <span>5 comments</span>
    </CardFooter>
  </Card>
</Page>