31 KiB
31 KiB
Card
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
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
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
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
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
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
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
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
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
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 > Header > Secondary
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 secondary={false}>
<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={false} shadow>
<Header secondary>
<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 secondary={false}>
<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 secondary={false}>
<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 secondary={false}>
<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 secondary={false}>
<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
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
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
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>
];