Svelteit

Cards

Example :: Card

This is my card title

This is my card description. It can be as long as you'd like. It could be in any language. It could say whatever you want.


<script>
  import { Card } from '@colorfuldots/svelteit'
</script>

<Card
  title="This is my card title"
  description="This is my card description. It can be as long as you'd like.
  It could be in any language. It could say whatever you want." 
/>

Example :: Card With Button

I have a title

I have a description


<script>
  import { Card, Button } from '@colorfuldots/svelteit'
</script>

<Card>
  <h3>I have a title</h3>
  <p>I have a description</p>
  <Button success rounded medium outlined>I have a button, Baby!</Button>
</Card>

<!-- OR you could do it like this -->

<Card
  title="I have a title"
  description="I have a description" 
  buttonComponent={<Button success rounded medium outlined>I have a button, Baby!</Button>}
/>

Example :: Card With Grid

Product One

This is a description

Product Two

This is a description


<script>
  import { Card, Container, Row, Column } from '@colorfuldots/svelteit'
</script>

<Container>
  <Row>
    <Column class="col-md-4">
      <Card>
        <h3>This is my card title</h3>
        <p>
          This is my card description. It can be as long as you'd like. It
          could be in any language. It could say whatever you want.
        </p>
      </Card>
    </Column>
    <Column class="col-md-4">
      <Card>
        <h3>This is my card title</h3>
        <p>
          This is my card description. It can be as long as you'd like. It
          could be in any language. It could say whatever you want.
        </p>
      </Card>
    </Column>
    <Column class="col-md-4">
      <Card>
        <h3>This is my card title</h3>
        <p>
          This is my card description. It can be as long as you'd like. It
          could be in any language. It could say whatever you want.
        </p>
      </Card>
    </Column>
  </Row>
</Container>

Example :: Card With Image

Javascript

Javascript is great


<script>
  import { Card, Container, Row, Column } from '@colorfuldots/svelteit'
  let title = 'Javascript'
  let description = 'Javascript is great'
  let image = 'https://picsum.photos/1000/560?random=9'
</script>

<Container>
  <Row>
    <Column class="col-md-4">
      <Card {title} {description} {image} />
    </Column>
  </Row>
</Container>

Example :: Dynamic Card With Image In Grid

Javascript

Javascript is great

Javascript

Javascript is great

Javascript

Javascript is great

Javascript

Javascript is great

Javascript

Javascript is great


<script>
  import { Card, Container, Row, Column } from '@colorfuldots/svelteit'
  let title = 'Javascript'
  let description = 'Javascript is great'
  let image = 'https://picsum.photos/1000/560?random=9'
  let image2 = 'https://picsum.photos/500/280?random=2'
  let image3 = 'https://picsum.photos/500/280?random=3'
  let image4 = 'https://picsum.photos/500/280?random=4'
</script>

<Container>
  <Row>
    <Column class="col-sm-6">
      <Card {title} {description} image={image3} />
    </Column>
    <Column class="col-sm-6">
      <Card {title} {description} image={image4} />
    </Column>
    <Column class="col-sm-4">
      <Card {title} {description} {image} />
    </Column>
    <Column class="col-sm-4">
      <Card {title} {description} image={image2} />
    </Column>
    <Column class="col-sm-4">
      <Card {title} {description} {image} />
    </Column>
  </Row>
</Container>

API

Prop Name	Type	Is Required	Default Value	Description
{children}	string	true	null	Add children to the body of the card by wrapping it in <Card>{children}</Card>
title	string	true	null	Sets the card title
description	string	false	null	Sets a description of the card
buttonComponent	component	false	null	Adds a custom component or custom button to the card
image	string	false	null	Adds an image to the card

Cards

A card component is useful in many applications that have requirements to display contained images, title, and description. Product Cards are perfect for displaying product information such as image, title, description, price, and more. User Cards are perfect for displaying contained user information such as a users avatar, name, email, and more.