No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Cards
 
Svelte Cards - Bootstrap 4 & Material Design
 
Bootstrap cards are components which display content build of different elements with characteristic shadows,
  depth and hover effects.
 
It is hard to think of a better way of displaying your content to users other than by cards. Some of the biggest
  players like Facebook or Google are well aware of that, as you might have noticed in almost all their products.
 
Cards provide you with clarity, clean content categorisation and attractive form of presenting it to the users.
 
MDB enhances Bootstrap cards with characteristic Material Design features, such as slight shadows, depth,
  cascading or waves effects. Apart from that, it enriches it with additional optional animations, social icons,
  avatars and various other effects not available in a native Bootstrap.
 
 
   
 
Card title
 
Some quick example text to build on the card title and make
        up the bulk of the card's content.
 MDBBtn
 
 
<script>
  import {MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBCol} from "mdbsvelte";
</script>
<MDBCol>
  <MDBCard style="width: 22rem">
    <MDBCardImage class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg"/>
    <MDBCardBody>
      <MDBCardTitle>Card title</MDBCardTitle>
      <MDBCardText>
        Some quick example text to build on the card title and make
        up the bulk of the card&apos;s content.
      </MDBCardText>
      <MDBBtn href="#">MDBBtn</MDBBtn>
    </MDBCardBody>
  </MDBCard>
</MDBCol>

 
Card groups
 
   
MDBCard image cap 
Panel title
 
Some quick example text to build on the card title and make up
        the bulk of the card's content.
 
 
MDBCard image cap 
Panel title
 
Some quick example text to build on the card title and make up
        the bulk of the card's content.
 
 
MDBCard image cap 
Panel title
 
Some quick example text to build on the card title and make up
        the bulk of the card's content.
 
 
 
<script>
  import {
    MDBCardGroup,
    MDBBtn,
    MDBCard,
    MDBCardBody,
    MDBCardImage,
    MDBCardTitle,
    MDBCardText,
    MDBCol
  } from "mdbsvelte";
</script>
<MDBCardGroup>
  <MDBCard>
    <MDBCardImage src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" alt="MDBCard image cap" top hover
                  overlay="white-slight"/>
    <MDBCardBody>
      <MDBCardTitle tag="h5">Panel title</MDBCardTitle>
      <MDBCardText>
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </MDBCardText>
      <MDBBtn color="primary" size="md">
        read more
      </MDBBtn>
    </MDBCardBody>
  </MDBCard>

  <MDBCard>
    <MDBCardImage src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" alt="MDBCard image cap" top hover
                  overlay="white-slight"/>
    <MDBCardBody>
      <MDBCardTitle tag="h5">Panel title</MDBCardTitle>
      <MDBCardText>
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </MDBCardText>
      <MDBBtn color="primary" size="md">
        read more
      </MDBBtn>
    </MDBCardBody>
  </MDBCard>

  <MDBCard>
    <MDBCardImage src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg" alt="MDBCard image cap" top hover
                  overlay="white-slight"/>
    <MDBCardBody>
      <MDBCardTitle tag="h5">Panel title</MDBCardTitle>
      <MDBCardText>
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </MDBCardText>
      <MDBBtn color="primary" size="md">
        read more
      </MDBBtn>
    </MDBCardBody>
  </MDBCard>
</MDBCardGroup>