Card

Wrapper for all card elements, one of the most common component in a UI.

Figma componentStorybook documentation

Mushrooms

Edible mushrooms

Edible mushrooms include many fungal species that are either harvested wild or cultivated.

React

<Card>
  <CardMedia image='https://upload.wikimedia.org/wikipedia/commons/9/9a/Chanterelle_Cantharellus_cibarius.jpg' />
  <CardHeader
    title="Mushrooms"
    subtitle="Edible mushrooms"
  />
  <CardContent>
    {/* insert content */}
  </CardContent>
  <CardActions>
    <Button color="grey">Back</Button>
    <Buttons>
      <Button color="error">Cancel</Button>
      <Button color="primary">Save</Button>
    </Buttons>
  </CardActions>
</Card>

CSS

<div class="card">
  <div class="card_media">
    <div class="card_mediaInner" style="background-image: url("");"></div>
  </div>  
  <div class="card_header">
    <h1 class="card_title">Card title</h1>
    <p class="card_subtitle">Card subtitle</p>
  </div>
  <div class="card_content">
    <!-- insert content -->
  </div>
  <div class="card_actions">
    <div class="buttons">
      <button type="button" class="button button-grey">Back</button>
      <button type="button" class="button button-error">Cancel</button>
    </div>
    <button type="button" class="button">Save</button>
  </div>
</div>

Props

Size

XSmall

Small

Medium

Large

XLarge

React

<Card size="xs">{/* insert content */}</Card>
<Card size="sm">{/* insert content */}</Card>
<Card>{/* insert content */}</Card>
<Card size="lg">{/* insert content */}</Card>
<Card size="xl">{/* insert content */}</Card>

CSS

<div class="card card-xs"><!-- insert content --></div>
<div class="card card-sm"><!-- insert content --></div>
<div class="card"><!-- insert content --></div>
<div class="card card-lg"><!-- insert content --></div>
<div class="card card-xl"><!-- insert content --></div>

Fill

Change the baackground and text color of the card.

Classes for pallote-css

If you are using pallote-css, use the fill modifier.

Default

Paper

Primary

Secondary

Success

Info

Warning

Error

React

<Card fill="default">{/* insert content */}</Card>
<Card>{/* insert content */}</Card>
<Card fill="primary">{/* insert content */}</Card>
<Card fill="secondary">{/* insert content */}</Card>
<Card fill="success">{/* insert content */}</Card>
<Card fill="info">{/* insert content */}</Card>
<Card fill="warning">{/* insert content */}</Card>
<Card fill="error">{/* insert content */}</Card>

CSS

<div class="card fill-default"><!-- insert content --></div>
<div class="card"><!-- insert content --></div>
<div class="card fill-primary"><!-- insert content --></div>
<div class="card fill-secondary"><!-- insert content --></div>
<div class="card fill-success"><!-- insert content --></div>
<div class="card fill-info"><!-- insert content --></div>
<div class="card fill-warning"><!-- insert content --></div>
<div class="card fill-error"><!-- insert content --></div>

Direction

Portrait

Landscape

React

<Card>{/* insert content */}</Card>
<Card direction="landscape">{/* insert content */}</Card>

CSS

<div class="card"><!-- insert content --></div>
<div class="card card-landscape"><!-- insert content --></div>

Align

Left

Center

Right

React

<Card>{/* insert content */}</Card>
<Card align="center">{/* insert content */}</Card>
<Card align="right">{/* insert content */}</Card>

CSS

<div class="card"><!-- insert content --></div>
<div class="card card-center"><!-- insert content --></div>
<div class="card card-right"><!-- insert content --></div>

HasShadow

HasShadow

React

<Card hasShadow>{/* insert content */}</Card>

CSS

<div class="card card-hasShadow"><!-- insert content --></div>

Transparent

Remove background color and padding around the edges.

Transparent

React

<Card transparent>{/* insert content */}</Card>

CSS

<div class="card card-transparent"><!-- insert content --></div>