{"componentChunkName":"component---src-pages-experimental-cards-style-mdx","path":"/experimental/cards/style/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Cards","tabs":["Usage","Style"]},"relativePagePath":"/experimental/cards/style.mdx","titleType":"prepend","MdxNode":{"id":"0925812c-d5a8-57ae-8516-9714edc23703","children":[],"parent":"f7e44fb0-196b-5e41-8de7-7982176e1f0d","internal":{"content":"---\ntitle: Cards\ntabs: ['Usage', 'Style']\n---\n\n## Specs\n\nCards have `16px | 1 rem` margins all around, including dashboard widgets.\n\n<Row>\n  <Column colMd={8}>\n\n![Cards should have 16px margins all around](images/general-card-specs-2.png)\n\n  <Caption>Structure and spacing measurements for small side panels | px | rem.</Caption>\n  </Column>\n</Row>\n\n## Typography\n\nAll card titles, captions and labels are set in sentence case. Set body text appropriately based on content.\n\n<Row>\n  <Column colMd={8}>\n\n![Cards should have 16px margins all around](images/card-headings.png)\n\n  <Caption>Structure and spacing measurements for small side panels | px | rem.</Caption>\n  </Column>\n</Row>\n\n### Double heading\n\n| Type               | Carbon token            | rem | px  |\n| ------------------ | ----------------------- | --- | --- |\n| Title              | `productive-heading-05` | 2   | 32  |\n| Caption / subtitle | `label-01`              | 1   | 16  |\n\n### Large heading\n\n| Type  | Carbon token | rem  | px  |\n| ----- | ------------ | ---- | --- |\n| Title | `heading-03` | 1.25 | 20  |\n\n### Small heading (heading and caption)\n\n| Type               | Carbon token            | rem   | px  |\n| ------------------ | ----------------------- | ----- | --- |\n| Title              | `productive-heading-01` | 0.875 | 14  |\n| Caption / subtitle | `label-01`              | 1     | 16  |\n\n### Body\n\n| Body text / Descriptions | Carbon token    | rem   | px  |\n| ------------------------ | --------------- | ----- | --- |\n| Cards with < 4 lines)    | `body-short-01` | 0.875 | 14  |\n| Cards with > 4 lines)    | `body-long-01`  | 0.875 | 14  |\n\n## Color\n\nFor general card usage, use a white card when the page background color is **gray 10**.\n\nIf you need to draw attention to a card with unique content such as a special offering on the catalog page, use a **gray 90** or gradient color background for the card. Please refrain from using marketing messages that may cause the user to percieve the card as an advertisement.\n\n<Row>\n  <Column colMd={8}>\n\n![Card colors](images/card-color.png)\n\n  <Caption>On gray 10 page/section backgrounds use white cards. <br />\n  On white page/section backgrounds or places where you want to draw attention use gray 90 cards.</Caption>\n  </Column>\n</Row>\n\n## Buttons and links\n\nCards use floating default buttons (primary, secondary, ghost, etc.) Arrow icons can also be used in cards on overview pages.\n","type":"Mdx","contentDigest":"5eec65b28901c72051fa6006a7ac04ce","counter":1417,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Cards","tabs":["Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Cards\ntabs: ['Usage', 'Style']\n---\n\n## Specs\n\nCards have `16px | 1 rem` margins all around, including dashboard widgets.\n\n<Row>\n  <Column colMd={8}>\n\n![Cards should have 16px margins all around](images/general-card-specs-2.png)\n\n  <Caption>Structure and spacing measurements for small side panels | px | rem.</Caption>\n  </Column>\n</Row>\n\n## Typography\n\nAll card titles, captions and labels are set in sentence case. Set body text appropriately based on content.\n\n<Row>\n  <Column colMd={8}>\n\n![Cards should have 16px margins all around](images/card-headings.png)\n\n  <Caption>Structure and spacing measurements for small side panels | px | rem.</Caption>\n  </Column>\n</Row>\n\n### Double heading\n\n| Type               | Carbon token            | rem | px  |\n| ------------------ | ----------------------- | --- | --- |\n| Title              | `productive-heading-05` | 2   | 32  |\n| Caption / subtitle | `label-01`              | 1   | 16  |\n\n### Large heading\n\n| Type  | Carbon token | rem  | px  |\n| ----- | ------------ | ---- | --- |\n| Title | `heading-03` | 1.25 | 20  |\n\n### Small heading (heading and caption)\n\n| Type               | Carbon token            | rem   | px  |\n| ------------------ | ----------------------- | ----- | --- |\n| Title              | `productive-heading-01` | 0.875 | 14  |\n| Caption / subtitle | `label-01`              | 1     | 16  |\n\n### Body\n\n| Body text / Descriptions | Carbon token    | rem   | px  |\n| ------------------------ | --------------- | ----- | --- |\n| Cards with < 4 lines)    | `body-short-01` | 0.875 | 14  |\n| Cards with > 4 lines)    | `body-long-01`  | 0.875 | 14  |\n\n## Color\n\nFor general card usage, use a white card when the page background color is **gray 10**.\n\nIf you need to draw attention to a card with unique content such as a special offering on the catalog page, use a **gray 90** or gradient color background for the card. Please refrain from using marketing messages that may cause the user to percieve the card as an advertisement.\n\n<Row>\n  <Column colMd={8}>\n\n![Card colors](images/card-color.png)\n\n  <Caption>On gray 10 page/section backgrounds use white cards. <br />\n  On white page/section backgrounds or places where you want to draw attention use gray 90 cards.</Caption>\n  </Column>\n</Row>\n\n## Buttons and links\n\nCards use floating default buttons (primary, secondary, ghost, etc.) Arrow icons can also be used in cards on overview pages.\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/experimental/cards/style.mdx"}}}}