Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
joyent-portal/packages/ui-toolkit/src/card/test.md

1252 lines
28 KiB
Markdown
Raw Blame History

#### Card
```jsx
const React = require('react');
const { default: Card } = require('.');
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');
const { default: Card } = require('.');
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');
const { default: Card } = require('.');
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');
const { default: Card } = require('.');
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');
const { default: Card } = require('.');
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');
const { default: Card, Header } = require('.');
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');
const { default: Card, Header } = require('.');
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');
const { default: Card, Header } = require('.');
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');
const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
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');
const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
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');
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
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');
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
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');
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
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>
];
```
Reference in New Issue View Git Blame Copy Permalink