{"componentChunkName":"component---src-pages-experimental-cards-style-mdx","path":"/experimental/cards/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Cards","tabs":["Usage","Style"]},"relativePagePath":"/experimental/cards/style.mdx","titleType":"prepend","MdxNode":{"id":"78aef85b-48e8-5549-93dd-a0f0b22c226e","children":[],"parent":"811ca943-a7c3-5dca-9a7b-581327972f02","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":"c5350d09f1e58efeca2638235ce30e3e","counter":1385,"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":"/fargate/7b444b50/src/pages/experimental/cards/style.mdx"}}}}