<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"
}
}
]
}
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;
.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);
}
}
Card Body is a wrapper component to add padding around the internals of a Paper or Card component.