{"componentChunkName":"component---src-pages-components-list-style-mdx","path":"/components/list/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","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":"adf9bf21-9028-56bf-ac43-6328676aa5ac","children":[],"parent":"3c7b6727-2500-5b5b-aa15-fdac5661c378","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":"5370421cce62de4658fd2927fc2e5a15","counter":1127,"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":"/tmp/42b44a0/src/pages/components/list/style.mdx"}}}}