joyent-portal/test.md at d84f972fbe0333525e20a3e950411ad565c743f7

28 KiB

Raw Blame History

Card

const React = require('react');
const { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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

const React = require('react');
const { 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 { 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 { 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>
];

28 KiB Raw Blame History

Card

Card > Collapsed

Card > Shadow

Card > Actionable

Card > Active

Card > Header

Card > Header > Shadow

Card > Header > Transparent

Card > Header > Box

Card > Header > Meta

Card > Outlet

Card > Outlet > Card

Card > Disabled

28 KiB

Raw Blame History