Cards

a grid layout used for multiple cards

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string

"start"

"center"

"end"

"stretch"

"baseline"

as

The DOM tag or react component to use for the element.

string

The name of a component.

"div"

function

() => {}

children

Function that will be called when each value is rendered.

function

{(datum) => (
  <Card key={datum.city} as="li">
    <CardBody>
      <Heading level={2} size="small" margin="none">
        {datum.city}
      </Heading>
    </CardBody>
    <CardFooter>{datum.state}</CardFooter>
  </Card>
)}

data

The data set.

array


[
  {
    "date": "2020-05-28",
    "amount": 88,
    "percent": 20
  },
  {
    "date": "2020-05-27",
    "amount": 77,
    "percent": 15
  }
]

gridArea

The name of the area to place this inside a parent Grid.

string

"a parent grid area name"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

onMore

Use this to indicate that 'cards' doesn't contain all that it could.

function

It will be called when the entire cards of items has been rendered. This might be used when the total number of cards that could be retrieved is more than you'd want to load into the browser. 'onMore' allows you to lazily fetch more from the server only when needed.

() => {}

onOrder

Called with the reordered data array when the user changes the order of the cards via drag and drop.

function

(reorderedData) => {}

pad

The amount of padding around the Box contents.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

paginate

Whether to paginate the data.

boolean

true

false

object

If providing an object, any Box props or Pagination props are valid and will be used to style the underlying pagination component.

{}

show

Ensure that the item at this index is visible initially.

number

size

The size of the columns given to the grid containing the cards.

string

"small"

sizeKey

The name of the member in the item object for a particular data item that will end up containing the row and/or column span for the child in the grid. This member should be an object of the form { rows: , columns: }.

string

"size"

step

How many items to render at a time.

number

React/DOM Properties

At its core, the Cards component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

cards.container

Any Box properties.

object

{}