{"componentChunkName":"component---src-pages-components-structured-list-style-mdx","path":"/components/structured-list/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","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":"3907625e-2cf2-5d1b-8f84-f5384d2455ce","children":[],"parent":"e33fec18-2914-5bea-8083-6ccf6bb667f4","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":"d2797de5da0c8d6b2a4d945d9cfb70ae","counter":1164,"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":"/tmp/42b44a0/src/pages/components/structured-list/style.mdx"}}}}