<div id="" class="Card-body " 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"
      }
    }
  ]
}
  • 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.