reactstrap#CardLink JavaScript Examples

The following examples show how to use reactstrap#CardLink. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CloseButton.js    From hivemind with Apache License 2.0 6 votes vote down vote up 
closeButton = ({ popperKey, divKey, poppers }) => (
  <CardLink
    href="#"
    className="btn btn-outline-dark float-right align-bottom ml-1"
    onClick={() => removePopper(popperKey, divKey, poppers)}
  >
    <X />
  </CardLink>
)
Example #2
Source File: index.js    From gobench with Apache License 2.0 4 votes vote down vote up 
render() {
    return (
      <div>
        <h5 className="mb-4">
          <strong>Default Cards</strong>
        </h5>
        <div>
          <Card>
            <CardImg
              top
              width="100%"
              src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
              alt="Card cap"
            />
            <CardBody>
              <CardTitle>Card title</CardTitle>
              <CardSubtitle>Card subtitle</CardSubtitle>
              <CardText>
                Some quick example text to build on the card title and make up the bulk of the cards
                content.
              </CardText>
              <Button color="primary">Button</Button>
            </CardBody>
          </Card>
        </div>
        <div className="mb-5">
          <Card>
            <CardBody>
              <CardTitle>Card title</CardTitle>
              <CardSubtitle>Card subtitle</CardSubtitle>
            </CardBody>
            <CardImg
              top
              width="100%"
              src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
              alt="Card cap"
            />
            <CardBody>
              <CardText>
                Some quick example text to build on the card title and make up the bulk of the cards
                content.
              </CardText>
              <CardLink>Card Link</CardLink>
              <CardLink>Another Link</CardLink>
            </CardBody>
          </Card>
        </div>
        <h5 className="mb-4">
          <strong>Colorful Cards</strong>
        </h5>
        <div className="row">
          <div className="col-lg-6">
            <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button>Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="primary">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="success">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="info">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="warning">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="danger">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
        </div>
      </div>
    )
  }