Card

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

Card

Cards are the way Bubbles organized content into sections. All of the outlined and dark code sections of this knowledgebase are made of cards.



Props


color string white
This is the background color of the card.

border boolean false
If you want the card to have a border.

center boolean false
Will center the text on the card

radius string rounded
Can be changed to "blocky" for less rounded cards. Ideally this should be set from the configStore to apply to all cards.

shadow boolean true
The shadow behind the card. You can't specify the shadow right now, just if you want it or not. It defaults to true.

height100 boolean false
Makes the card height 100% of the row it's in. This is useful for when you have two columns and there are two tows side by side. It defaults to false.

px number 0.065
The horizontal padding on the card in rem values. It defaults to 0.065.

py number 2
The vertical padding on the card in rem values. It defaults to 2.

new_page boolean false
Pass true if you want this button to open the page contents in a new page.

wide boolean true
Pass true if you want the button to take the full width of it's parent container.

mt number 0
The top margin in rem values.

mb number 0
The bottom margin in rem values.

This is a basic card with just text inside. You can slot whatever content you want inside

This is a card with a border and no shadow

This is a card with a color property of primary and no border.

<script>
  import { Card } from "bubbles-ui";

  const props = {
    color: "white",
    border: false,
    shadow: true,
    height100: false,
    px: 0.065,
    py: 2,
  };
</script>

<Card>
  <p This is a basic card with just text inside. You can slot whatever content you want inside</p>
</Card>

<Card border={true} shadow={false}>
  <p This is a card with a border and no shadow</p>
</Card>

<Card border={true} shadow={false} color={"primary"}>
  <p style="color: white">This is a card with a color property of primary and no border.</p>
</Card>

<style>
  p {
    margin-top: 1rem;
  }
</style>

CardHeader

The CardHeader is fixed to the top of the card and will contain things like the title, action buttons, and filters.



Props


title string
The main prop that you will usually include in your card. This will be the title that describes the content of the card.

caption string
If you need more details for your title, you can include a caption, which will display smaller text below the title. Captions load data as html, so you can add an anchor tag with an href inline and it will render the link correctly.

shadow boolean true
The shadow behind the card. You can't specify the shadow right now, just if you want it or not. It defaults to true.

border boolean false
Adds a border to the bottom of the component.

center boolean false
This will center the text in component. It's advised to not use this if you are including a buttons or filters property.

buttons array<IconButton>
Buttons are an array of IconButtons that will show up on the right side of the header.

filters array<IconButton>
An array of filters that should be used if you have a Table inside of your Card and want to filter the data. The Filters are a special type of Select that will modify url query params, which will cause Svelte to refetch the data required. To get a more accurate loading indicator, it's advised to run the hideLoading() function with no props just before the promise from the load function resolves.

Show Details
filter[].id string
The key of the query param.
filter[].label string
The label for the filter.
filter[].options array
The options for the user to choose from.
filter[].option[].label string
The text the user sees for the option
filter[].option[].value string
The value that will be added for the url query param
filter[].option[].caption string
Optional explanation for the choice

To add a line break between filter options, you can just add an option with a an object {divider: true}, which will inject a divider component.


Title

Learn more here.

This is a card header
Header With Buttons

You can also add a caption.

This is a card header with buttons
Filter
Select an option
This is a card header with filters. The filters will update page query params which will make Svelte fetch new data. You can also pass your own logic for the filter by adding a function to the onselect property for the filter options. 
<script>
  import { Card, CardHeader, showModal } from "bubbles-ui";
</script>

<Card color="dark" px={0} py={0} height100={true}>
  <CodeCard2 />
</Card>

<Card>
  <CardHeader title="Title" caption="Learn more <a href='https://google.com'>here</a>." />
  <div class="d-flex">This is a card header</div>
</Card>

<Card>
  <CardHeader
    title="Header With Buttons"
    buttons={[
      {
        icon: "edit",
        href: "/#cards",
      },
      {
        icon: "more",
        options: [
          {
            label: "Contact Support",
            href: "/#cards",
          },
          {
            label: "Delete Account",
            onclick: () => {
              showModal("Delete Account");
            },
          },
        ],
      },
    ]}
  />
  <div class="d-flex">This is a card header with buttons</div>
</Card>

<Card>
  <CardHeader
    filters={[
      {
        id: "filter",
        label: "Filter",
        options: [
          {
            label: "Filter 1",
            value: "filter1",
            caption: "Most popular",
          },
          { divider: true },
          {
            label: "Filter 2",
            value: "filter2",
          },
          {
            label: "Filter 3",
            value: "filter3",
          },
        ],
      },
    ]}
  />
  <span class="d-flex">
    This is a card header with filters. The filters will update page query params which will make Svelte fetch new data.
    You can also pass your own logic for the filter by adding a function to the onselect property for the filter
    options.
  </span>
</Card>

CardFooter

The CardFooter is fixed to the bottom of the card and will contain pagination if required. View details in the Table section.



Props


pagination object
Will add the Pagination component. Useful if you have Table component slotted in the Card.