@coreui/ajax
Version:
Open Source Bootstrap Admin Template
367 lines (362 loc) • 17.8 kB
JavaScript
import React, {Component} from "react";
import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBlock, Label, Input} from "reactstrap";
class Cards extends Component {
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
<CardFooter>Card footer</CardFooter>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
<i className="fa fa-check float-right"></i>Card with icon
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card with switch
<Label className="switch switch-sm switch-text switch-info float-right mb-0">
<Input type="checkbox" className="switch-input"/>
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card with label
<Badge color="success" className="float-right">Success</Badge>
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card with label
<Badge pill color="danger" className="float-right">42</Badge>
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="border-primary">
<CardHeader>
Card outline primary
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-secondary">
<CardHeader>
Card outline secondary
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-success">
<CardHeader>
Card outline success
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-info">
<CardHeader>
Card outline info
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-warning">
<CardHeader>
Card outline warning
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-danger">
<CardHeader>
Card outline danger
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-primary">
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-secondary">
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-success">
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-info">
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-warning">
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-danger">
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary text-center">
<CardBlock className="card-body">
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-success text-center">
<CardBlock className="card-body">
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-info text-center">
<CardBlock className="card-body">
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-warning text-center">
<CardBlock className="card-body">
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-danger text-center">
<CardBlock className="card-body">
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary text-center">
<CardBlock className="card-body">
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary">
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-success">
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-info">
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-warning">
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-danger">
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBlock>
</Card>
</Col>
</Row>
</div>
)
}
}
export default Cards;