Types

The Card component provides predefined types that you can use to change the Card appearance.

import React from 'react';
import ReactDOM from 'react-dom';
import { Card, CardTitle, CardBody, CardActions } from '@progress/kendo-react-layout';

class App extends React.Component {
    render() {
        return (
            <div style={{ display: 'flex', justifyContent: 'space-evenly'}}>
                <div className='k-card-list'>
                    <Card style={{ width: 200 }}>
                        <CardBody>
                            <CardTitle>Card Title</CardTitle>
                            <CardTitle>Card Subtitle</CardTitle>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                    <Card style={{ width: 200 }} type='primary'>
                        <CardBody>
                            <CardTitle>Card Title</CardTitle>
                            <CardTitle>Card Subtitle</CardTitle>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                </div>
                <div className='k-card-list'>
                    <Card style={{ width: 200 }} type='info'>
                        <CardBody>
                            <CardTitle>Card Title</CardTitle>
                            <CardTitle>Card Subtitle</CardTitle>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                    <Card style={{ width: 200 }} type='success'>
                        <CardBody>
                            <CardTitle>Card Title</CardTitle>
                            <CardTitle>Card Subtitle</CardTitle>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                </div>
                <div className='k-card-list'>
                    <Card style={{ width: 200 }} type='warning'>
                        <CardBody>
                            <CardTitle>Card Title</CardTitle>
                            <CardTitle>Card Subtitle</CardTitle>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                    <Card style={{ width: 200 }} type='error'>
                        <CardBody>
                            <CardTitle>Card Title</CardTitle>
                            <CardTitle>Card Subtitle</CardTitle>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);