600 West

Card Body: Card Body Tight 

<div id="" class="Card-body Card-body--tight" style="">
    <h2 class="_small " style="">
        Cool title
    </h2>

    <p id="" class="">
        Corrupti eum vero dolorem quidem quia iste ut explicabo omnis reprehenderit quo unde repudiandae aliquam expedita amet dolores nobis optio.
    </p>

    <button class="button  ">
        Learn more
    </button>

</div>
 
<div
    id="{{id}}"
    class="Card-body {{modifier}}"
    style="{{style}}"
>
    {{> @children }}
</div>
 
{
  "id": null,
  "style": null,
  "children": [
    {
      "component": "heading",
      "context": {
        "level": 2,
        "modifier": "_small",
        "text": "Cool title"
      }
    },
    {
      "component": "p",
      "context": {
        "text": "Corrupti eum vero dolorem quidem quia iste ut explicabo omnis reprehenderit quo unde repudiandae aliquam expedita amet dolores nobis optio."
      }
    },
    {
      "component": "button",
      "context": {
        "text": "Learn more"
      }
    }
  ],
  "modifier": "Card-body--tight"
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import {render} from '../../../helpers/render';

const CardBody = props => {
    return (
        <div id={props.id} className={cx(['Card-body', props.modifier])} style={props.style}>
            {render(props.children)}
        </div>
    );
};

CardBody.propTypes = {
    id: PropTypes.string,
    modifier: PropTypes.string,
    open: false,
    style: PropTypes.string,
    children: PropTypes.element
};

export default CardBody;
  • URL: /components/raw/card-body/Card-body.jsx
  • Filesystem Path: components/molecules/Card-body/Card-body.jsx
  • Size: 527 Bytes
  • Content: 
    .Card-body {
    padding: Space(500);
}
.Card-body--tight {
    padding: Space(400);
}
.Card-body--tall {
    padding: (Space(500) * 2) Space(500);
}
.Card-body--tight.Card-body--tall {
    padding: Space(500) Space(400);
}
@media #{$mobile-media} {
    .Card-body {
        padding: Space(400);
    }
    .Card-body--tall {
        padding: Space(500) Space(400);
    }
}
  • URL: /components/raw/card-body/Card-body.scss
  • Filesystem Path: components/molecules/Card-body/Card-body.scss
  • Size: 373 Bytes

Details

Card Body is a wrapper component to add padding around the internals of a Paper or Card component.

Best Practices

  • Use within Paper or Card or any descendents of Paper or Card.

Layout

  • The default padding is even all around.
  • The “tall” variant is often used on bigger/wider cards to apply more top and bottom padding.
  • The “tight” variant should be used on smaller cards.
  • Padding is decreased slightly on smaller viewport widths.