skip to main content

skip to navigation sidebar

skip to context sidebar

created:7/7/2021

updated:7/7/2021

loc

98

comments

12%

passed

6

failed

10

coverage

88%

Card

grommet-controls

3.0.2

A Card-type container, all props of Box apply

Component

import { Card } from 'grommet-controls';

Gap

Card

Card content

() => (
  <Card gap="medium">
    <Card.CardTitle border="bottom">Card</Card.CardTitle>
    <Card.CardContent basis="small">Card content</Card.CardContent>
  </Card>
)

Properties

	Name	Description	Default
ICardProps(1 properties)
	children	children card elements to be displayed ReactNode	-
BoxProps(28 properties)

Commits

Date	Author	Commit Message
8/31/2020	atanasster	update stories titles and navigation
8/30/2020	atanasster	update eslint and add component-controls
8/27/2019	atanasster	initial commit 2.x alpha

3 commits

External dependencies

package	imports	peer
grommet ^2.15.0	HeadingPropsHeadingBoxPropsBox	*
react ^17.0.1	React	*
styled-components ^5.1.1	ThemeContext	*

Internal dependencies

file	imports
"./CardProps"	ICardPropsICardTitlePropsICardContentPropsICardActionsProps
"./StyledCard"	StyledCard

Component JSX

<ThemeContext.Consumer

>

styled-components

^5.1.1

<StyledCard

themeoverflow

/>

StyledCard

from"./StyledCard"

<Box

alignpadgapborderflexfilldirection

/>

^2.15.0

<Box

directionfillbordergapflex

>

^2.15.0

<Heading

levelmargincolortextAligntruncateresponsive

>

^2.15.0

<strong

/>

strong

<Box

padfillflex

/>

^2.15.0

Stories

Main

Info card

sub-title info

({
  border,
  align,
  direction,
  pad,
  imageStamp,
  title,
  level,
  fit,
  image,
  height,
}) => (
  <Card>
    <Card.CardTitle
      border={border}
      align={align}
      direction={direction}
      pad={pad}
    >
      <Box direction="row">
        <ImageStamp {...imageStamp} />
        <Heading level={level} margin="xsmall">
          {title}
        </Heading>
      </Box>
      <Box direction="row">
        <Bitcoin color="plain" />
        <Text>sub-title info</Text>
      </Box>
    </Card.CardTitle>
    <Card.CardContent>
      <Image fit={fit} src={image} height={`${height}`} />
    </Card.CardContent>
    <Card.CardActions justify="center">
      {actions.map((action, index) => (
        <Button
          key={`actions_${index}`}
          label={action.label}
          onClick={action.onClick}
        />
      ))}
    </Card.CardActions>
  </Card>
)

Animation

Card

() => (
  <Card
    animation={{
      type: 'zoomIn',
      duration: 5000,
      size: 'xlarge',
    }}
  >
    <Card.CardTitle border="bottom">Card</Card.CardTitle>
    <Card.CardContent>
      <Image
        fit="cover"
        src="//v2.grommet.io/assets/Wilderpeople_Ricky.jpg"
        height="250"
      />
    </Card.CardContent>
  </Card>
)

Background

Card

Card content

() => (
  <Card background="accent-1">
    <Card.CardTitle border="bottom">Card</Card.CardTitle>
    <Card.CardContent basis="small">Card content</Card.CardContent>
  </Card>
)

Border

Card

Card content

() => (
  <Card
    border={{
      color: 'brand',
      size: 'medium',
    }}
  >
    <Card.CardTitle border="bottom">Card</Card.CardTitle>
    <Card.CardContent basis="small">Card content</Card.CardContent>
  </Card>
)

Elevation

Card

Card content

() => (
  <Card elevation="large">
    <Card.CardTitle border="bottom">Card</Card.CardTitle>
    <Card.CardContent basis="small">Card content</Card.CardContent>
  </Card>
)

Pad

Card

Card content

() => (
  <Card pad="medium">
    <Card.CardTitle border="bottom">Card</Card.CardTitle>
    <Card.CardContent basis="small">Card content</Card.CardContent>
  </Card>
)

Round

Card

Card content

() => (
  <Card round="medium" pad="small">
    <Card.CardTitle border="bottom">Card</Card.CardTitle>
    <Card.CardContent basis="small">Card content</Card.CardContent>
  </Card>
)

controls/Avatar

controls/Colors