Skip to main content

Card

See React Bootstrap/Cards for full documentation and props.

Result
Loading...
Live Editor
<div data-testid="pw-card">
	<Card style={{ width: '75%', marginLeft: 'auto', marginRight: 'auto' }}>
		<Card.Header>Header</Card.Header>
		<Card.Body>
			<Card.Title>Title</Card.Title>
			<Card.Subtitle>Subtitle</Card.Subtitle>
			<Card.Text>Body</Card.Text>
			<Card.Link>Find more cats</Card.Link>
		</Card.Body>
		<Card.Footer>Footer</Card.Footer>
	</Card>
</div>

Sizes​

Result
Loading...
Live Editor
<div className="d-grid k-gap-5">
	{['xs', 'sm', 'md', 'lg'].map((size) => (
		<Card key={size} size={size}>
			<Card.Body>Card!</Card.Body>
		</Card>
	))}
</div>

Border​

Result
Loading...
Live Editor
<div>
	<Card border>
		<Card.Body>Card with border</Card.Body>
	</Card>
</div>

Shadows​

Result
Loading...
Live Editor
<div className="d-grid k-gap-8">
	{['none', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => (
		<Card key={size} shadow={size}>
			<Card.Body>Card!</Card.Body>
		</Card>
	))}
</div>

Avoiding padding​

To avoid padding in the card you can omit the Card.Body component.

Result
Loading...
Live Editor
<div>
	<Card border>Card without padding</Card>
</div>

Props​