@ddsys/material/src/styles/card.js

<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>

import Color from "color";
export default function(theme) {
  const { colors, variables } = theme;
  const { common, card } = variables;

  return {
    style: {
      position: "relative",
      display: "flex",
      flexDirection: "column",
      minWidth: "0",
      wordWrap: "break-word",
      backgroundColor: colors.white,
      backgroundClip: "border-box",
      border: `1px solid ${Color(colors.gray_900)
        .alpha(0.2)
        .string()}`,
      borderRadius: `${card.borderRadius}rem`
    },
    header: {
      padding: "0.75rem 1.25rem",
      marginBottom: "0",
      backgroundColor: colors.gray_200,
      borderBottom: `1px solid ${Color(colors.gray_900)
        .alpha(0.2)
        .string()}`,
      "&:first-child": {
        borderRadius: `calc(${card.borderRadius}rem - 1px) calc(${
          card.borderRadius
        }rem - 1px) 0 0`
      }
    },
    body: {
      flex: "1 1 auto",
      padding: `${common.spacing * 1.25}rem`
    },
    footer: {
      padding: `${common.spacing * 0.75}rem ${common.spacing * 1.25}rem`,
      backgroundColor: colors.gray_200,
      borderTop: `1px solid ${Color(colors.gray_900)
        .alpha(0.2)
        .string()}`
    }
  };
}