Card

Card - 图1

  1. import React from 'react';
  2. import { Card, CardImg, CardText, CardBody,
  3.   CardTitle, CardSubtitle, Button } from 'reactstrap';
  5. const Example = (props) => {
  6.   return (
  7.     <div>
  8.       <Card>
  9.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
  10.         <CardBody>
  11.           <CardTitle>Card title</CardTitle>
  12.           <CardSubtitle>Card subtitle</CardSubtitle>
  13.           <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  14.           <Button>Button</Button>
  15.         </CardBody>
  16.       </Card>
  17.     </div>
  18.   );
  19. };
  21. export default Example;

Properties

  1. Card.propTypes = {
  2.   // Pass in a Component to override default element
  3.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  4.   inverse: PropTypes.bool,
  5.   color: PropTypes.string,
  6.   body: PropTypes.bool,
  7.   className: PropTypes.string
  8. };
  10. CardBody.propTypes = {
  11.   // Pass in a Component to override default element
  12.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  13.   className: PropTypes.string
  14. };
  16. CardColumns.propTypes = {
  17.   // Pass in a Component to override default element
  18.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  19.   className: PropTypes.string
  20. };
  22. CardDeck.propTypes = {
  23.   // Pass in a Component to override default element
  24.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  25.   className: PropTypes.string
  26. };
  28. CardFooter.propTypes = {
  29.   // Pass in a Component to override default element
  30.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  31.   className: PropTypes.string
  32. };
  34. CardGroup.propTypes = {
  35.   // Pass in a Component to override default element
  36.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  37.   className: PropTypes.string
  38. };
  40. CardHeader.propTypes = {
  41.   // Pass in a Component to override default element
  42.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  43.   className: PropTypes.string
  44. };
  46. CardImg.propTypes = {
  47.   // Pass in a Component to override default element
  48.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  49.   className: PropTypes.string,
  50.   // Use top or bottom to position image via "card-img-top" or "card-img-bottom"
  51.   top: PropTypes.bool,
  52.   bottom: PropTypes.bool
  53. };
  55. CardImgOverlay.propTypes = {
  56.   // Pass in a Component to override default element
  57.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  58.   className: PropTypes.string
  59. };
  61. CardLink.propTypes = {
  62.   // Pass in a Component to override default element
  63.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  64.   className: PropTypes.string,
  65.   // ref will only get you a reference to the CardLink component, use innerRef to get a reference to the DOM element (for things like focus management).
  66.   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  67. };
  69. CardSubtitle.propTypes = {
  70.   // Pass in a Component to override default element
  71.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  72.   className: PropTypes.string
  73. };
  75. CardText.propTypes = {
  76.   // Pass in a Component to override default element
  77.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  78.   className: PropTypes.string
  79. };
  81. CardTitle.propTypes = {
  82.   // Pass in a Component to override default element
  83.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  84.   className: PropTypes.string
  85. };

Content Types

Card - 图2

  1. import React from 'react';
  2. import { Card, CardImg, CardText, CardBody, CardLink,
  3.   CardTitle, CardSubtitle } from 'reactstrap';
  5. const Example = (props) => {
  6.   return (
  7.     <div>
  8.       <Card>
  9.         <CardBody>
  10.           <CardTitle>Card title</CardTitle>
  11.           <CardSubtitle>Card subtitle</CardSubtitle>
  12.         </CardBody>
  13.         <img width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
  14.         <CardBody>
  15.           <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  16.           <CardLink href="#">Card Link</CardLink>
  17.           <CardLink href="#">Another Link</CardLink>
  18.         </CardBody>
  19.       </Card>
  20.     </div>
  21.   );
  22. };
  24. export default Example;

Sizing

Card - 图3

  1. import React from 'react';
  2. import { Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
  4. const Example = (props) => {
  5.   return (
  6.     <Row>
  7.       <Col sm="6">
  8.         <Card body>
  9.           <CardTitle>Special Title Treatment</CardTitle>
  10.           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  11.           <Button>Go somewhere</Button>
  12.         </Card>
  13.       </Col>
  14.       <Col sm="6">
  15.         <Card body>
  16.           <CardTitle>Special Title Treatment</CardTitle>
  17.           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  18.           <Button>Go somewhere</Button>
  19.         </Card>
  20.       </Col>
  21.     </Row>
  22.   );
  23. };
  25. export default Example;

Text alignment

Card - 图4

  1. import React from 'react';
  2. import { Card, Button, CardTitle, CardText } from 'reactstrap';
  4. const Example = (props) => {
  5.   return (
  6.     <div>
  7.       <Card body>
  8.         <CardTitle>Special Title Treatment</CardTitle>
  9.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  10.         <Button>Go somewhere</Button>
  11.       </Card>
  12.       <Card body className="text-center">
  13.         <CardTitle>Special Title Treatment</CardTitle>
  14.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  15.         <Button>Go somewhere</Button>
  16.       </Card>
  17.       <Card body className="text-right">
  18.         <CardTitle>Special Title Treatment</CardTitle>
  19.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  20.         <Button>Go somewhere</Button>
  21.       </Card>
  22.     </div>
  23.   );
  24. };
  26. export default Example;

Card - 图5

  1. import React from 'react';
  2. import { Card, Button, CardHeader, CardFooter, CardBody,
  3.   CardTitle, CardText } from 'reactstrap';
  5. const Example = (props) => {
  6.   return (
  7.     <div>
  8.       <Card>
  9.         <CardHeader>Header</CardHeader>
  10.         <CardBody>
  11.           <CardTitle>Special Title Treatment</CardTitle>
  12.           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  13.           <Button>Go somewhere</Button>
  14.         </CardBody>
  15.         <CardFooter>Footer</CardFooter>
  16.       </Card>
  18.       <Card>
  19.         <CardHeader tag="h3">Featured</CardHeader>
  20.         <CardBody>
  21.           <CardTitle>Special Title Treatment</CardTitle>
  22.           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  23.           <Button>Go somewhere</Button>
  24.         </CardBody>
  25.         <CardFooter className="text-muted">Footer</CardFooter>
  26.       </Card>
  27.     </div>
  28.   );
  29. };
  31. export default Example;

Image caps

Card - 图6

  1. import React from 'react';
  2. import { Card, CardBody, Button, CardTitle, CardText, CardImg } from 'reactstrap';
  4. const Example = (props) => {
  5.   return (
  6.     <div>
  7.       <Card>
  8.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
  9.         <CardBody>
  10.           <CardTitle>Card Title</CardTitle>
  11.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
  12.           <CardText>
  13.             <small className="text-muted">Last updated 3 mins ago</small>
  14.           </CardText>
  15.         </CardBody>
  16.       </Card>
  17.       <Card>
  18.         <CardBody>
  19.           <CardTitle>Card Title</CardTitle>
  20.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
  21.           <CardText>
  22.             <small className="text-muted">Last updated 3 mins ago</small>
  23.           </CardText>
  24.         </CardBody>
  25.         <CardImg bottom width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
  26.       </Card>
  27.     </div>
  28.   );
  29. };
  31. export default Example;

Image overlays

Card - 图7

  1. import React from 'react';
  2. import { Card, CardTitle, CardText, CardImg, CardImgOverlay } from 'reactstrap';
  4. const Example = (props) => {
  5.   return (
  6.     <div>
  7.       <Card inverse>
  8.         <CardImg width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97270&w=318&h=270&bg=333333&txtclr=666666" alt="Card image cap" />
  9.         <CardImgOverlay>
  10.           <CardTitle>Card Title</CardTitle>
  11.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
  12.           <CardText>
  13.             <small className="text-muted">Last updated 3 mins ago</small>
  14.           </CardText>
  15.         </CardImgOverlay>
  16.       </Card>
  17.     </div>
  18.   );
  19. };
  21. export default Example;

Background variants

Card - 图8

  1. import React from 'react';
  2. import { Card, Button, CardTitle, CardText } from 'reactstrap';
  4. const Example = (props) => {
  5.   return (
  6.     <div>
  7.       <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
  8.         <CardTitle>Special Title Treatment</CardTitle>
  9.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  10.         <Button>Button</Button>
  11.       </Card>
  12.       <Card body inverse color="primary">
  13.         <CardTitle>Special Title Treatment</CardTitle>
  14.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  15.         <Button color="secondary">Button</Button>
  16.       </Card>
  17.       <Card body inverse color="success">
  18.         <CardTitle>Special Title Treatment</CardTitle>
  19.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  20.         <Button color="secondary">Button</Button>
  21.       </Card>
  22.       <Card body inverse color="info">
  23.         <CardTitle>Special Title Treatment</CardTitle>
  24.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  25.         <Button color="secondary">Button</Button>
  26.       </Card>
  27.       <Card body inverse color="warning">
  28.         <CardTitle>Special Title Treatment</CardTitle>
  29.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  30.         <Button color="secondary">Button</Button>
  31.       </Card>
  32.       <Card body inverse color="danger">
  33.         <CardTitle>Special Title Treatment</CardTitle>
  34.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  35.         <Button color="secondary">Button</Button>
  36.       </Card>
  37.     </div>
  38.   );
  39. };
  41. export default Example;

Outline variants

Card - 图9

  1. import React from 'react';
  2. import { Card, Button, CardTitle, CardText } from 'reactstrap';
  4. const Example = (props) => {
  5.   return (
  6.     <div>
  7.       <Card body outline color="secondary">
  8.         <CardTitle>Special Title Treatment</CardTitle>
  9.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  10.         <Button>Button</Button>
  11.       </Card>
  12.       <Card body outline color="primary">
  13.         <CardTitle>Special Title Treatment</CardTitle>
  14.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  15.         <Button color="secondary">Button</Button>
  16.       </Card>
  17.       <Card body outline color="success">
  18.         <CardTitle>Special Title Treatment</CardTitle>
  19.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  20.         <Button color="secondary">Button</Button>
  21.       </Card>
  22.       <Card body outline color="info">
  23.         <CardTitle>Special Title Treatment</CardTitle>
  24.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  25.         <Button color="secondary">Button</Button>
  26.       </Card>
  27.       <Card body outline color="warning">
  28.         <CardTitle>Special Title Treatment</CardTitle>
  29.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  30.         <Button color="secondary">Button</Button>
  31.       </Card>
  32.       <Card body outline color="danger">
  33.         <CardTitle>Special Title Treatment</CardTitle>
  34.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  35.         <Button color="secondary">Button</Button>
  36.       </Card>
  37.     </div>
  38.   );
  39. };
  41. export default Example;

Groups

Card - 图10

  1. import React from 'react';
  2. import { Card, Button, CardImg, CardTitle, CardText, CardGroup,
  3.  CardSubtitle, CardBody } from 'reactstrap';
  5. const Example = (props) => {
  6.   return (
  7.     <CardGroup>
  8.       <Card>
  9.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  10.         <CardBody>
  11.           <CardTitle>Card title</CardTitle>
  12.           <CardSubtitle>Card subtitle</CardSubtitle>
  13.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
  14.           <Button>Button</Button>
  15.         </CardBody>
  16.       </Card>
  17.       <Card>
  18.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  19.         <CardBody>
  20.           <CardTitle>Card title</CardTitle>
  21.           <CardSubtitle>Card subtitle</CardSubtitle>
  22.           <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
  23.           <Button>Button</Button>
  24.         </CardBody>
  25.       </Card>
  26.       <Card>
  27.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  28.         <CardBody>
  29.           <CardTitle>Card title</CardTitle>
  30.           <CardSubtitle>Card subtitle</CardSubtitle>
  31.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
  32.           <Button>Button</Button>
  33.         </CardBody>
  34.       </Card>
  35.     </CardGroup>
  36.   );
  37. };
  39. export default Example;

Decks

Card - 图11

  1. import React from 'react';
  2. import { Card, Button, CardImg, CardTitle, CardText, CardDeck,
  3.  CardSubtitle, CardBody } from 'reactstrap';
  5. const Example = (props) => {
  6.   return (
  7.     <CardDeck>
  8.       <Card>
  9.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  10.         <CardBody>
  11.           <CardTitle>Card title</CardTitle>
  12.           <CardSubtitle>Card subtitle</CardSubtitle>
  13.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
  14.           <Button>Button</Button>
  15.         </CardBody>
  16.       </Card>
  17.       <Card>
  18.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  19.         <CardBody>
  20.           <CardTitle>Card title</CardTitle>
  21.           <CardSubtitle>Card subtitle</CardSubtitle>
  22.           <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
  23.           <Button>Button</Button>
  24.         </CardBody>
  25.       </Card>
  26.       <Card>
  27.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  28.         <CardBody>
  29.           <CardTitle>Card title</CardTitle>
  30.           <CardSubtitle>Card subtitle</CardSubtitle>
  31.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
  32.           <Button>Button</Button>
  33.         </CardBody>
  34.       </Card>
  35.     </CardDeck>
  36.   );
  37. };
  39. export default Example;

Columns

Card - 图12

  1. import React from 'react';
  2. import { Card, Button, CardImg, CardTitle, CardText, CardColumns,
  3.  CardSubtitle, CardBody } from 'reactstrap';
  5. const Example = (props) => {
  6.   return (
  7.     <CardColumns>
  8.       <Card>
  9.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  10.         <CardBody>
  11.           <CardTitle>Card title</CardTitle>
  12.           <CardSubtitle>Card subtitle</CardSubtitle>
  13.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
  14.           <Button>Button</Button>
  15.         </CardBody>
  16.       </Card>
  17.       <Card>
  18.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  19.       </Card>
  20.       <Card>
  21.         <CardBody>
  22.           <CardTitle>Card title</CardTitle>
  23.           <CardSubtitle>Card subtitle</CardSubtitle>
  24.           <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
  25.           <Button>Button</Button>
  26.         </CardBody>
  27.       </Card>
  28.       <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
  29.         <CardTitle>Special Title Treatment</CardTitle>
  30.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  31.         <Button>Button</Button>
  32.       </Card>
  33.       <Card>
  34.         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
  35.         <CardBody>
  36.           <CardTitle>Card title</CardTitle>
  37.           <CardSubtitle>Card subtitle</CardSubtitle>
  38.           <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
  39.           <Button>Button</Button>
  40.         </CardBody>
  41.       </Card>
  42.       <Card body inverse color="primary">
  43.         <CardTitle>Special Title Treatment</CardTitle>
  44.         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
  45.         <Button color="secondary">Button</Button>
  46.       </Card>
  47.     </CardColumns>
  48.   );
  49. };
  51. export default Example;