{"componentChunkName":"component---src-pages-components-structured-list-style-mdx","path":"/components/structured-list/style/","webpackCompilationHash":"9a5cb62a61994334ab3f","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":"f9b75702-dcb3-5eec-98f8-5c5e317f3520","children":[],"parent":"98a2521c-fbb3-5631-b95b-4f048bf8fd7c","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":"93600ee46fca6a5e2835dff854ed8a18","counter":1231,"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/35443907/src/pages/components/structured-list/style.mdx"}}}}