Card

A card is a sheet of material that serves as an entry point to more detailed information.

Import Syntax

xxxxxxxxxx
 
import Card, {
  CardTitle,
  CardContent,
  CardImage
} from 'calcite-react/Card'

Basic Usage

Bridge Club, 1954 — Florida, January 1954

Card with Image

Cards can have full-bleed images with optional captions.

 
<Card style={{ maxWidth: '320px' }}>
  <CardImage
    src={cardImage}
    caption="Florida, January 1954"
    alt="Bridge Club, 1954"
  />
  <CardContent>
    <CardTitle>Card with Image</CardTitle>
    <p>Cards can have full-bleed images with optional captions.</p>
    <Button>View Examples</Button>
  </CardContent>
</Card>

Shaped Cards

Another class shaped allows for a stylized version of the card meant to work with geometrically-shaped images.

 
<Card shaped style={{ maxWidth: '320px' }}>
  <CardImage src={cardImageCircle} alt="Bridge Club, 1942" />
  <CardContent>
    <p>
      Another class <code>shaped</code> allows for a stylized version of the
      card meant to work with geometrically-shaped images.
    </p>
    <Button clear>View Examples</Button>
  </CardContent>
</Card>

With Bar

Card with Colored Bar

Every color in calcite can be used as a colored "bar" along the top of a card to provide a bit of visual punch with bar=" {color}"

Card with Colored Bar

Every color in calcite can be used as a colored "bar" along the top of a card to provide a bit of visual punch with bar=" {color}"

Card with Colored Bar

Every color in calcite can be used as a colored "bar" along the top of a card to provide a bit of visual punch with bar=" {color}"

Card with Colored Bar

Every color in calcite can be used as a colored "bar" along the top of a card to provide a bit of visual punch with bar=" {color}"

 
<Card bar="blue" style={{ margin: '0 5px', flex: '1 1 20%' }}>
  <CardContent>
    <CardTitle>Card with Colored Bar</CardTitle>
    <p>
      Every color in calcite can be used as a colored "bar" along the top of a
      card to provide a bit of visual punch with{' '}
      <code>
        bar="
        {'{color}'}"
      </code>
    </p>
    <Button clear>What Colors?</Button>
  </CardContent>
</Card>
<Card bar="green" style={{ margin: '0 5px', flex: '1 1 20%' }}>
  <CardContent>
    <CardTitle>Card with Colored Bar</CardTitle>
    <p>
      Every color in calcite can be used as a colored "bar" along the top of a
      card to provide a bit of visual punch with{' '}
      <code>
        bar="
        {'{color}'}"
      </code>
    </p>
    <Button clear>What Colors?</Button>
  </CardContent>
</Card>
<Card bar="yellow" style={{ margin: '0 5px', flex: '1 1 20%' }}>
  <CardContent>
    <CardTitle>Card with Colored Bar</CardTitle>
    <p>
      Every color in calcite can be used as a colored "bar" along the top of a
      card to provide a bit of visual punch with{' '}
      <code>
        bar="
        {'{color}'}"
      </code>
    </p>
    <Button clear>What Colors?</Button>
  </CardContent>
</Card>
<Card bar="red" style={{ margin: '0 5px', flex: '1 1 20%' }}>
  <CardContent>
    <CardTitle>Card with Colored Bar</CardTitle>
    <p>
      Every color in calcite can be used as a colored "bar" along the top of a
      card to provide a bit of visual punch with{' '}
      <code>
        bar="
        {'{color}'}"
      </code>
    </p>
    <Button clear>What Colors?</Button>
  </CardContent>
</Card>

Wide Cards

Wide cards are just like standard cards except that they are displayed in landscape orientation. This is useful in situations where there is too much content to display well in a standard card.

Generally, wide cards are meant to be displayed one-up, not grouped.

 
<Card wide>
  <CardImage
    wide
    src={cardImage}
    caption="Florida, January 1954"
    alt="Bridge Club, 1954"
  />
  <CardContent wide>
    <CardTitle>Wide Cards</CardTitle>
    <p>
      Wide cards are just like standard cards except that they are displayed
      in landscape orientation. This is useful in situations where there is
      too much content to display well in a standard card.
    </p>
    <p>
      Generally, wide cards are meant to be displayed one-up, not grouped.
    </p>
  </CardContent>
</Card>

Props

Card `default`

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.
bar	String	false	-	Style prop to show a colored bar across the top of the Card; can take a string for any color name in EsriColors.
shaped	Bool	false	-	Style prop to add a shape mask to the CardImage.
wide	Bool	false	-	Style prop to position Card content horizontally and fill the width of its container.

CardContent

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.

CardImage

Property	Type	Required	Default	Description
src	String	false	-	The HTML src property of the CardImage.
caption	String	false	-	The text content of the figure caption on the CardImage.
alt	String	false	-	The HTML alt property of the component.

CardTitle

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.

Calcite React

Card

Import Syntax

Basic Usage

Card with Image

Shaped Cards

With Bar

Card with Colored Bar

Card with Colored Bar

Card with Colored Bar

Card with Colored Bar

Wide Cards

Wide Cards

Props

Card default

CardContent

CardImage

CardTitle

Card `default`