{"componentChunkName":"component---src-pages-components-accordion-style-mdx","path":"/components/accordion/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/accordion/style.mdx","titleType":"prepend","MdxNode":{"id":"e93c5878-9410-55e0-9495-5d2c24448367","children":[],"parent":"c734d382-b003-5ad4-853f-a8293dc94e36","internal":{"content":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| ------------------------- | ---------- | ----------- |\n| `.bx--accordion__title` | color | `$text-01` |\n| `.bx--accordion__content` | color | `$text-01` |\n| `.bx--accordion__arrow` | fill | `$icon-01` |\n| `.bx--accordion__item` | border-top | `$ui-03` |\n\n## Typography\n\nAll accordion labels are set in sentence case and should not exceed three words. Set body text appropriately based on content.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--accordion__title` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n| `.bx--accordion__content` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\nThere is no limit to the height of an open row, however, follow the other padding specs below. The width of an accordion varies based on the content, layout, and page design. The chevron icon can be found on the [icons](/guidelines/icons/library) library page. Avoid having any text within 16px / 1rem of the accordion's sides. Additionally, include padding between labels, body copy, and separation lines to provide breathing room between elements.\n\n| Class | Property | px/rem | Spacing token |\n| ------------------------------ | -------------- | -------- | ------------- |\n| `.bx--accordion__heading` | height | 32 / 2 | – |\n| `.bx--accordion__item` | border-top | 1 | – |\n| `.bx--accordion__arrow` | size | 16 / 1 | – |\n| `.bx--accordion__arrow` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--accordion__title` | margin-left | 16 / 1 | `$spacing-05` |\n| `.bx--accordion__content` | padding-right | 25% | – |\n| `.bx--accordion__content` | padding-top | 8 / 0.5 | `$spacing-03` |\n| `.bx--accordion__content` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--accordion__item--active` | padding-bottom | 24 / 1.5 | `$spacing-06` |\n\n\n\n\n\n
\n\nStructure and spacing measurements for accordion | px / rem\n","type":"Mdx","contentDigest":"a47dc3075d7fbc970033e2ee84dfb3f3","counter":1277,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| ------------------------- | ---------- | ----------- |\n| `.bx--accordion__title` | color | `$text-01` |\n| `.bx--accordion__content` | color | `$text-01` |\n| `.bx--accordion__arrow` | fill | `$icon-01` |\n| `.bx--accordion__item` | border-top | `$ui-03` |\n\n## Typography\n\nAll accordion labels are set in sentence case and should not exceed three words. Set body text appropriately based on content.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--accordion__title` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n| `.bx--accordion__content` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\nThere is no limit to the height of an open row, however, follow the other padding specs below. The width of an accordion varies based on the content, layout, and page design. The chevron icon can be found on the [icons](/guidelines/icons/library) library page. Avoid having any text within 16px / 1rem of the accordion's sides. Additionally, include padding between labels, body copy, and separation lines to provide breathing room between elements.\n\n| Class | Property | px/rem | Spacing token |\n| ------------------------------ | -------------- | -------- | ------------- |\n| `.bx--accordion__heading` | height | 32 / 2 | – |\n| `.bx--accordion__item` | border-top | 1 | – |\n| `.bx--accordion__arrow` | size | 16 / 1 | – |\n| `.bx--accordion__arrow` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--accordion__title` | margin-left | 16 / 1 | `$spacing-05` |\n| `.bx--accordion__content` | padding-right | 25% | – |\n| `.bx--accordion__content` | padding-top | 8 / 0.5 | `$spacing-03` |\n| `.bx--accordion__content` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--accordion__item--active` | padding-bottom | 24 / 1.5 | `$spacing-06` |\n\n\n\n\n\n
\n\nStructure and spacing measurements for accordion | px / rem\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/accordion/style.mdx"}}}}