2017-10-31 12:03:44 +02:00
|
|
|
#### Card
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card>
|
|
|
|
<code>{`<Card />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary>
|
|
|
|
<code>{`<Card secondary />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary>
|
|
|
|
<code>{`<Card tertiary />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Collapsed
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed>
|
|
|
|
<code>{`<Card collapsed />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed>
|
|
|
|
<code>{`<Card secondary collapsed />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed>
|
|
|
|
<code>{`<Card tertiary collapsed />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Shadow
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow>
|
|
|
|
<code>{`<Card collapsed shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow>
|
|
|
|
<code>{`<Card secondary collapsed shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow>
|
|
|
|
<code>{`<Card tertiary collapsed shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Actionable
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow actionable>
|
|
|
|
<code>{`<Card shadow actionable />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow actionable>
|
|
|
|
<code>{`<Card secondary shadow actionable />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow actionable>
|
|
|
|
<code>{`<Card tertiary shadow actionable />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow actionable>
|
|
|
|
<code>{`<Card collapsed shadow actionable />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow actionable>
|
|
|
|
<code>{`<Card secondary collapsed shadow actionable />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow actionable>
|
|
|
|
<code>{`<Card tertiary collapsed shadow actionable />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Active
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow active>
|
|
|
|
<code>{`<Card shadow active />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow active>
|
|
|
|
<code>{`<Card secondary shadow active />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow active>
|
|
|
|
<code>{`<Card tertiary shadow active />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow active>
|
|
|
|
<code>{`<Card collapsed shadow active />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow active>
|
|
|
|
<code>{`<Card secondary collapsed shadow active />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow active>
|
|
|
|
<code>{`<Card tertiary collapsed shadow active />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Header
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<Header>
|
|
|
|
<code>{`<Header />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<Header>
|
|
|
|
<code>{`<Header />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<Header>
|
|
|
|
<code>{`<Header />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow>
|
|
|
|
<Header>
|
|
|
|
<code>{`<Header />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow>
|
|
|
|
<Header>
|
|
|
|
<code>{`<Header />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow>
|
|
|
|
<Header>
|
|
|
|
<code>{`<Header />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Header > Shadow
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<code>{`<Header shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<code>{`<Header shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<code>{`<Header shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<code>{`<Header shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<code>{`<Header shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<code>{`<Header shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Header > Transparent
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<Header transparent shadow>
|
|
|
|
<code>{`<Header transparent shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<Header transparent shadow>
|
|
|
|
<code>{`<Header transparent shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<Header transparent shadow>
|
|
|
|
<code>{`<Header transparent shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow>
|
|
|
|
<Header transparent shadow>
|
|
|
|
<code>{`<Header transparent shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow>
|
|
|
|
<Header transparent shadow>
|
|
|
|
<code>{`<Header transparent shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow>
|
|
|
|
<Header transparent shadow>
|
|
|
|
<code>{`<Header transparent shadow />`}</code>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Header > Box
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta />
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta />
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta />
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta />
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta />
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta />
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Header > Meta
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<Header>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<Header>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<Header>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow>
|
|
|
|
<Header>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow>
|
|
|
|
<Header>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow>
|
|
|
|
<Header>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Outlet
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card collapsed shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card secondary collapsed shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card tertiary collapsed shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Outlet > Card
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
<Card shadow>
|
|
|
|
<Header transparent>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
<Card shadow stacked>
|
|
|
|
<Header transparent>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
<Card shadow>
|
|
|
|
<Header transparent>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
<Card shadow stacked>
|
|
|
|
<Header transparent>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
<Card shadow>
|
|
|
|
<Header transparent>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
<Card shadow stacked>
|
|
|
|
<Header transparent>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Card > Disabled
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const React = require('react');
|
2017-10-31 12:29:15 +02:00
|
|
|
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
2017-10-31 12:03:44 +02:00
|
|
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
|
|
|
|
|
|
|
[
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card shadow disabled>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary shadow disabled>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card secondary shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary shadow disabled>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card tertiary shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card collapsed shadow disabled>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card collapsed shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card secondary collapsed shadow disabled>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card secondary collapsed shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>,
|
|
|
|
<br />,
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Card tertiary collapsed shadow disabled>
|
|
|
|
<Header shadow>
|
|
|
|
<HeaderBox border="right">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderBox>
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
<HeaderMeta>
|
|
|
|
<code>{`<HeaderMeta />`}</code>
|
|
|
|
</HeaderMeta>
|
|
|
|
<HeaderBox border="left">
|
|
|
|
<code>HB</code>
|
|
|
|
</HeaderBox>
|
|
|
|
</Header>
|
|
|
|
<Outlet>
|
|
|
|
<code>{`<Card tertiary collapsed shadow />`}</code>
|
|
|
|
<code>{`<Outlet />`}</code>
|
|
|
|
</Outlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
];
|
|
|
|
```
|