{"componentChunkName":"component---src-pages-components-structured-list-style-mdx","path":"/components/structured-list/style/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Structured list","description":"Structured lists group content that is similar or related, such as terms and definitions.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/structured-list/style.mdx","titleType":"prepend","MdxNode":{"id":"09c403ab-f6f3-5ff4-af1c-20ee9e10d89e","children":[],"parent":"403dc340-d5f3-5de0-9367-0c1a45002e22","internal":{"content":"---\ntitle: Structured list\ndescription: Structured lists group content that is similar or related, such as terms and definitions.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| -------------------------------------- | ------------- | ----------- |\n| `.bx--structured-list-th` | text color | `$text-01` |\n| `.bx--structured-list-td` | text color | `$text-02` |\n| `.bx--structured-list-row--header-row` | border-bottom | `$ui-03` |\n| `.bx--structured-list-row` | border-bottom | `$ui-03` |\n\n### Interactive states\n\n| Class | Property | Color token |\n| ------------------------------------ | ---------------- | -------------- |\n| `.bx--structured-list-row--selected` | background-color | `$selected-ui` |\n| `.bx--structured-list-svg:checked` | fill | `$ui-05` |\n| `.bx--structured-list-row:hover` | background-color | `$hover-row` |\n| `.bx--structured-list-svg:hover` | fill | `$ui-04` |\n| `.bx--structured-list-row:focus` | border | `$focus` |\n\n## Typography\n\nStructured list headers should be set in title case, while all other text is set in sentence case. All typography is left aligned.\n\n| Property | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------- | ------------------ | --------------- | --------------- |\n| `.bx--structured-list-th` | 14 / 0.875 | Semi-Bold / 600 | `$heading-01` |\n| `.bx--structured-list` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n| Property | Property | px / rem | Spacing token |\n| -------------------------- | --------------------------- | ----------- | ------------- |\n| `.bx--structured-list` | min-width | 500 / 31.25 | – |\n| `.bx--structured-list` | min-width | 500 / 36 | – |\n| `.bx--structured-list-th` | padding-top | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-th` | padding-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--structured-list-th` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-td` | padding-top | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-td` | padding-bottom | 24 / 1.5 | `$spacing-06` |\n| `.bx--structured-list-td` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-svg` | height, width | 16 / 1 | – |\n\n\n\n\n\n
\n\nSpacing and measurements for structured list | px / rem\n\n\n\n\n\n
\n\n\n Spacing and measurements for structured list with selection | px / rem\n\n","type":"Mdx","contentDigest":"b6489aff0d3ec89661732299c6a9a0e2","counter":1382,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Structured list","description":"Structured lists group content that is similar or related, such as terms and definitions.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Structured list\ndescription: Structured lists group content that is similar or related, such as terms and definitions.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| -------------------------------------- | ------------- | ----------- |\n| `.bx--structured-list-th` | text color | `$text-01` |\n| `.bx--structured-list-td` | text color | `$text-02` |\n| `.bx--structured-list-row--header-row` | border-bottom | `$ui-03` |\n| `.bx--structured-list-row` | border-bottom | `$ui-03` |\n\n### Interactive states\n\n| Class | Property | Color token |\n| ------------------------------------ | ---------------- | -------------- |\n| `.bx--structured-list-row--selected` | background-color | `$selected-ui` |\n| `.bx--structured-list-svg:checked` | fill | `$ui-05` |\n| `.bx--structured-list-row:hover` | background-color | `$hover-row` |\n| `.bx--structured-list-svg:hover` | fill | `$ui-04` |\n| `.bx--structured-list-row:focus` | border | `$focus` |\n\n## Typography\n\nStructured list headers should be set in title case, while all other text is set in sentence case. All typography is left aligned.\n\n| Property | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------- | ------------------ | --------------- | --------------- |\n| `.bx--structured-list-th` | 14 / 0.875 | Semi-Bold / 600 | `$heading-01` |\n| `.bx--structured-list` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n| Property | Property | px / rem | Spacing token |\n| -------------------------- | --------------------------- | ----------- | ------------- |\n| `.bx--structured-list` | min-width | 500 / 31.25 | – |\n| `.bx--structured-list` | min-width | 500 / 36 | – |\n| `.bx--structured-list-th` | padding-top | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-th` | padding-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--structured-list-th` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-td` | padding-top | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-td` | padding-bottom | 24 / 1.5 | `$spacing-06` |\n| `.bx--structured-list-td` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--structured-list-svg` | height, width | 16 / 1 | – |\n\n\n\n\n\n
\n\nSpacing and measurements for structured list | px / rem\n\n\n\n\n\n
\n\n\n Spacing and measurements for structured list with selection | px / rem\n\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/structured-list/style.mdx"}}}}