Layouts

The Cards can be arrange in three different built-in layouts inducing List, Group and Deck.

To arrange the Card in a specific layout, wrap the Cards in a container with on of the following classes:

  • Card list - rendering cards detached from one another in a column through the .k-card-list class
  • Card Group - rendering cards attached to one another on a single row through the .k-card-group class
  • Card Deck - rendering cards detached from one another on a single row through the .k-card-deck class

Basic usage

The following example demonstrates how to dynamically change the Cards layout.

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

class App extends React.Component {
    state = {
        currentLayout: 'k-card-list'
    }
    handleOnChange = (e) => {
        this.setState({
            currentLayout: e.target.value
        })
    }
    render() {
        return (
            <div>
                <p>Change the layout:</p>
                <DropDownList
                    data={['k-card-list', 'k-card-group', 'k-card-deck']}
                    value={this.state.currentLayout}
                    onChange={this.handleOnChange}
                />
                <hr/>
                <div className={this.state.currentLayout}>
                    <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 }}>
                        <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')
);
 /