{"componentChunkName":"component---src-pages-components-list-style-mdx","path":"/components/list/style/","webpackCompilationHash":"c31bf13abf12c5c2789b","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"List","description":"Lists consist of related content grouped together and organized vertically.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/list/style.mdx","titleType":"prepend","MdxNode":{"id":"e44cb9e7-6733-5087-8ccd-33e2e12c4efa","children":[],"parent":"b394bb62-ac00-5906-99b8-464567815e77","internal":{"content":"---\ntitle: List\ndescription: Lists consist of related content grouped together and organized vertically.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Attribute         | Property | Color token |\n| ----------------- | -------- | ----------- |\n| `.bx--list__item` | color    | `$text-01`  |\n\n## Typography\n\nLevel 1 and 2 of any list type should be set in bold and sentence case, with only the first word in a phrase and any proper noun capitalized. **Line height** for lists should be set at 24px / 1.5rem.\n\n| Class               | Font-size (px/rem) | Font-weight   | Type token       |\n| ------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--list__item`   | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n| `.bx--list--nested` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThere are two types of Lists, ordered and unordered.\nLevel 1 ordered list points are marked numerically while Level 2 points are marked with a dash.\nLevel 1 unordered list points are bulleted while Level 2 points are marked with a dash.\n\n| Item    | Property      | px / rem | Spacing token |\n| ------- | ------------- | -------- | ------------- |\n| Level 1 | margin-bottom | 4 / 0.25 | `$spacing-02` |\n| Level 2 | margin-bottom | 0        | –             |\n| Level 2 | padding-left  | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for ordered and unordered lists](images/list-style-1.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for an ordered and an unordered list | px /\n  rem\n</Caption>\n","type":"Mdx","contentDigest":"a7bec3d922662af2650d70c45f5a37fc","counter":1342,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"List","description":"Lists consist of related content grouped together and organized vertically.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: List\ndescription: Lists consist of related content grouped together and organized vertically.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Attribute         | Property | Color token |\n| ----------------- | -------- | ----------- |\n| `.bx--list__item` | color    | `$text-01`  |\n\n## Typography\n\nLevel 1 and 2 of any list type should be set in bold and sentence case, with only the first word in a phrase and any proper noun capitalized. **Line height** for lists should be set at 24px / 1.5rem.\n\n| Class               | Font-size (px/rem) | Font-weight   | Type token       |\n| ------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--list__item`   | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n| `.bx--list--nested` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThere are two types of Lists, ordered and unordered.\nLevel 1 ordered list points are marked numerically while Level 2 points are marked with a dash.\nLevel 1 unordered list points are bulleted while Level 2 points are marked with a dash.\n\n| Item    | Property      | px / rem | Spacing token |\n| ------- | ------------- | -------- | ------------- |\n| Level 1 | margin-bottom | 4 / 0.25 | `$spacing-02` |\n| Level 2 | margin-bottom | 0        | –             |\n| Level 2 | padding-left  | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for ordered and unordered lists](images/list-style-1.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for an ordered and an unordered list | px /\n  rem\n</Caption>\n","fileAbsolutePath":"/zeit/7d243b86/src/pages/components/list/style.mdx"}}}}