Card Layouts

React.createElement(
class CardLayoutExample extends Component {
  static defaultHeight = '396px';

  state = {
    height: this.constructor.defaultHeight,
  };

  expand = () => {
    this.setState({height: null})
  };

  contract = () => {
    this.setState({height: this.constructor.defaultHeight})
  };

  render() {
    return (
      <div>
        <p>
          The Fill will squeeze and scroll when the CardLayout height
          is constrained. When the height is not constrained, it will
          expand to fit its content. Click the Expand and Contract
          buttons to illustrate the difference.
        </p>
        <CardLayout
          style={{
            height: this.state ? this.state.height : null,
          }}
        >
          <Card.Header>
            <Row className="rev-Row--flex rev-Row--middle">
              <Col>
                <h3>Header</h3>
              </Col>
              <Col shrink>
                <HelpText>Today at 2pm</HelpText>
              </Col>
            </Row>
          </Card.Header>
          <Card.Header>
            <Row>
              <Col>
                <p>You can have more than one header.</p>
              </Col>
            </Row>
          </Card.Header>
          <CardLayout.Fill>
            <Row>
              <Col>
                <p><Lipsum /></p>
                <p><Lipsum p={2} /></p>
              </Col>
            </Row>
          </CardLayout.Fill>
          <Card.Footer>
            <Row>
              <Col>
                <Button onClick={this.expand}>Expand</Button>
                <Button onClick={this.contract}>Contract</Button>
              </Col>
            </Row>
          </Card.Footer>
        </CardLayout>
      </div>
    )
  }
}
)