www/docs/components/cards.mdx
import CardBasic from '!!raw-loader!../examples/Card/Basic'; import CardBgColor from '!!raw-loader!../examples/Card/BgColor'; import CardBodyOnly from '!!raw-loader!../examples/Card/BodyOnly'; import CardBodyShorthand from '!!raw-loader!../examples/Card/BodyShorthand'; import CardBorder from '!!raw-loader!../examples/Card/Border'; import CardGrid from '!!raw-loader!../examples/Card/Grid'; import CardGroup from '!!raw-loader!../examples/Card/Group'; import CardHeaderAndFooter from '!!raw-loader!../examples/Card/HeaderAndFooter'; import CardImageAndText from '!!raw-loader!../examples/Card/ImageAndText'; import CardImgOverlay from '!!raw-loader!../examples/Card/ImgOverlay'; import CardKitchenSink from '!!raw-loader!../examples/Card/KitchenSink'; import CardListGroups from '!!raw-loader!../examples/Card/ListGroups'; import CardListGroupWithHeader from '!!raw-loader!../examples/Card/ListGroupWithHeader'; import CardNavPills from '!!raw-loader!../examples/Card/NavPills'; import CardNavTabs from '!!raw-loader!../examples/Card/NavTabs'; import CardText from '!!raw-loader!../examples/Card/Text'; import CardWithHeader from '!!raw-loader!../examples/Card/WithHeader'; import CardWithHeaderAndQuote from '!!raw-loader!../examples/Card/WithHeaderAndQuote'; import CardWithHeaderStyled from '!!raw-loader!../examples/Card/WithHeaderStyled';
Use <Card.Body> to pad content inside a <Card>.
Alternatively, you can use this shorthand version for Cards with body only, and no other children
<CodeBlock language="jsx" live> {CardBodyShorthand} </CodeBlock>Using <Card.Title>, <Card.Subtitle>, and
<Card.Text> inside the <Card.Body> will line them up nicely.
<Card.Link>s are used to line up links next to each other.
<Card.Text> outputs <p> tags around the content, so you can
use multiple <Card.Text>s to create separate paragraphs.
Create lists of content in a card with a flush list group.
<CodeBlock language="jsx" live> {CardListGroups} </CodeBlock> <CodeBlock language="jsx" live> {CardListGroupWithHeader} </CodeBlock>You may add a header by adding a <Card.Header> component.
A <CardHeader> can be styled by passing a heading element
through the <as> prop
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
<CodeBlock language="jsx" live> {CardImageAndText} </CodeBlock>Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
<CodeBlock language="jsx" live> {CardImgOverlay} </CodeBlock>Add some navigation to a card’s header (or block) with React Bootstrap’s Nav components.
<CodeBlock language="jsx" live> {CardNavTabs} </CodeBlock> <CodeBlock language="jsx" live> {CardNavPills} </CodeBlock>You can change a card's appearance by changing their <bg>, and <text> props.
Use Row's grid column props to control how many cards to show per row.