Card

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Button

import React from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button, Skeleton } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Card
            style={{
                width: '318px',
            }}
        >
            <CardImg top width="100%" src="https://dummyimage.com/318x180/9fa4a8/fff.png" alt="Card image 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 card's content.
                </CardText>
                <Button>Button</Button>
            </CardBody>
        </Card>

        <Card
            style={{
                width: '318px',
            }}
        >
            <CardImg
                top
                width="100%"
                height="180px"
                src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                alt="Card image cap"
                className="skeleton"
            />
            <CardBody>
                <CardTitle>
                    <Skeleton type="title" />
                </CardTitle>
                <CardSubtitle>
                    <Skeleton type="title" />
                </CardSubtitle>
                <CardText>
                    <Skeleton lines={3} />
                </CardText>
                <Button>Button</Button>
            </CardBody>
        </Card>
    </div>
);

export default Example;

Properties

Card.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  inverse: PropTypes.bool,
  color: PropTypes.string,
  body: PropTypes.bool,
  className: PropTypes.string
};

CardBody.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardColumns.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardDeck.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardFooter.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardGroup.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardHeader.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardImg.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  // Use top or bottom to position image via "card-img-top" or "card-img-bottom"
  top: PropTypes.bool,
  bottom: PropTypes.bool
};

CardImgOverlay.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardLink.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  // 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).
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
};

CardSubtitle.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardText.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

CardTitle.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string
};

Content Types

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card LinkAnother Link

import React from 'react';
import { Card, CardImg, CardText, CardBody, CardLink, CardTitle, CardSubtitle } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Card>
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
            </CardBody>
            <img width="100%" src="https://dummyimage.com/318x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
                <CardLink href="#">Card Link</CardLink>
                <CardLink href="#">Another Link</CardLink>
            </CardBody>
        </Card>
    </div>
);

export default Example;

Sizing

import React from 'react';
import { Card, Button, CardTitle, CardText, Row, Col } from 'seduo-ui';

const Example = (props) => (
    <Row>
        <Col sm="6">
            <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Go somewhere</Button>
            </Card>
        </Col>
        <Col sm="6">
            <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Go somewhere</Button>
            </Card>
        </Col>
    </Row>
);

export default Example;

Text alignment

import React from 'react';
import { Card, Button, CardTitle, CardText } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Card body>
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button>Go somewhere</Button>
        </Card>
        <Card body className="text-center">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button>Go somewhere</Button>
        </Card>
        <Card body className="text-right">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button>Go somewhere</Button>
        </Card>
    </div>
);

export default Example;

Header and Footer

import React from 'react';
import { Card, Button, CardHeader, CardFooter, CardBody, CardTitle, CardText } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Card>
            <CardHeader>Header</CardHeader>
            <CardBody>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Go somewhere</Button>
            </CardBody>
            <CardFooter>Footer</CardFooter>
        </Card>

        <Card>
            <CardHeader tag="h3">Featured</CardHeader>
            <CardBody>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Go somewhere</Button>
            </CardBody>
            <CardFooter className="text-muted">Footer</CardFooter>
        </Card>
    </div>
);

export default Example;

Image caps

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Centered text with rounded image

Card subtitle

Doing tasks that have meaning

Learn more

import React from 'react';
import { Card, CardBody, CardTitle, CardText, CardImg, CardHeader, CardSubtitle, LinkButton } from 'seduo-ui';
import RoundedImageExample from '../examples/RoundedImage';

const Example = (props) => (
    <div>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/318x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card Title</CardTitle>
                <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>
                <CardText>
                    <small className="text-muted">Last updated 3 mins ago</small>
                </CardText>
            </CardBody>
        </Card>
        <Card>
            <CardBody>
                <CardTitle>Card Title</CardTitle>
                <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>
                <CardText>
                    <small className="text-muted">Last updated 3 mins ago</small>
                </CardText>
            </CardBody>
            <CardImg bottom width="100%" src="https://dummyimage.com/318x180/9fa4a8/fff.png" alt="Card image cap" />
        </Card>
        <h4 className="my-6">Centered text with rounded image</h4>
        <Card
            style={{
                width: '318px',
            }}
            className="text-center"
        >
            <CardHeader className="mb-6">
                <RoundedImageExample />
            </CardHeader>
            <CardBody>
                <CardSubtitle className="text-muted mb-3">Card subtitle</CardSubtitle>
                <CardTitle className="mb-7">
                    <h3>Doing tasks that have meaning</h3>
                </CardTitle>
                <LinkButton>Learn more</LinkButton>
            </CardBody>
        </Card>
    </div>
);

export default Example;

Image overlays

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

import React from 'react';
import { Card, CardTitle, CardText, CardImg, CardImgOverlay } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Card inverse>
            <CardImg width="100%" src="https://dummyimage.com/318x270/9fa4a8/fff.png" alt="Card image cap" />
            <CardImgOverlay>
                <CardTitle>Card Title</CardTitle>
                <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>
                <CardText>
                    <small className="text-muted">Last updated 3 mins ago</small>
                </CardText>
            </CardImgOverlay>
        </Card>
    </div>
);

export default Example;

Background variants

import React from 'react';
import { Card, Button, CardTitle, CardText } from 'seduo-ui';

const Example = (props) => (
    <div>
        <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>
        <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="secondary">Button</Button>
        </Card>
        <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="secondary">Button</Button>
        </Card>
        <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="secondary">Button</Button>
        </Card>
        <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="secondary">Button</Button>
        </Card>
        <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="secondary">Button</Button>
        </Card>
    </div>
);

export default Example;

Outline variants

import React from 'react';
import { Card, Button, CardTitle, CardText } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Card body outline color="secondary">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button>Button</Button>
        </Card>
        <Card body outline color="primary">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button color="secondary">Button</Button>
        </Card>
        <Card body outline color="success">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button color="secondary">Button</Button>
        </Card>
        <Card body outline color="info">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button color="secondary">Button</Button>
        </Card>
        <Card body outline color="warning">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button color="secondary">Button</Button>
        </Card>
        <Card body outline color="danger">
            <CardTitle>Special Title Treatment</CardTitle>
            <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
            <Button color="secondary">Button</Button>
        </Card>
    </div>
);

export default Example;

Groups

Card title

Card subtitle

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Button

Card title

Card subtitle

This card has supporting text below as a natural lead-in to additional content.

Button

Card title

Card subtitle

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.

Button

import React from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardGroup, CardSubtitle, CardBody } from 'seduo-ui';

const Example = (props) => (
    <CardGroup>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <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>
                <Button>Button</Button>
            </CardBody>
        </Card>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Button</Button>
            </CardBody>
        </Card>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <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>
                <Button>Button</Button>
            </CardBody>
        </Card>
    </CardGroup>
);

export default Example;

Decks

Card title

Card subtitle

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Button

Card title

Card subtitle

This card has supporting text below as a natural lead-in to additional content.

Button

Card title

Card subtitle

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.

Button

import React from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'seduo-ui';

const Example = (props) => (
    <CardDeck>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <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>
                <Button>Button</Button>
            </CardBody>
        </Card>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Button</Button>
            </CardBody>
        </Card>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <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>
                <Button>Button</Button>
            </CardBody>
        </Card>
    </CardDeck>
);

export default Example;

Columns

Card title

Card subtitle

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Button

Card title

Card subtitle

This card has supporting text below as a natural lead-in to additional content.

Button

Special Title Treatment

With supporting text below as a natural lead-in to additional content.

Button

Card title

Card subtitle

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.

Button

Special Title Treatment

With supporting text below as a natural lead-in to additional content.

Button

import React from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardColumns, CardSubtitle, CardBody } from 'seduo-ui';

const Example = (props) => (
    <CardColumns>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <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>
                <Button>Button</Button>
            </CardBody>
        </Card>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
        </Card>
        <Card>
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Button</Button>
            </CardBody>
        </Card>
        <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>
        <Card>
            <CardImg top width="100%" src="https://dummyimage.com/256x180/9fa4a8/fff.png" alt="Card image cap" />
            <CardBody>
                <CardTitle>Card title</CardTitle>
                <CardSubtitle>Card subtitle</CardSubtitle>
                <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>
                <Button>Button</Button>
            </CardBody>
        </Card>
        <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="secondary">Button</Button>
        </Card>
    </CardColumns>
);

export default Example;