{"componentChunkName":"component---src-pages-components-tag-style-mdx","path":"/components/tag/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Tag","description":"Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/tag/style.mdx","titleType":"prepend","MdxNode":{"id":"1603389f-53f9-5033-b9b8-ad34e7572b36","children":[],"parent":"02aa6948-9e9e-59b7-8ca0-cba8b416d9d8","internal":{"content":"---\ntitle: Tag\ndescription: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nUsing the IBM Design Language [color palette](https://www.ibm.com/design/language/elements/color), the tag text color should be 5 steps away from the tag background color\n\n## Typography\n\nTag text should be set in sentence case, and should only have one word. However, if more than one is necessary, then connect the words using a hyphen with no spaces.\n\n| Property   | Font-size (px/rem) | Font-weight   | Type token  |\n| ---------- | ------------------ | ------------- | ----------- |\n| `.bx--tag` | 12 / 0.75          | Regular / 400 | `$label-01` |\n\n## Structure\n\nAll tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 24px radius.\n\n| Class      | Property                    | px / rem | Spacing token |\n| ---------- | --------------------------- | -------- | ------------- |\n| `.bx--tag` | height                      | 24 / 1.5 | –             |\n| `.bx--tag` | radius                      | 24px     | –             |\n| `.bx--tag` | margin                      | 8 / 0.5  | `$spacing-03` |\n| `.bx--tag` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurementst](images/tag-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for a tag | px / rem</Caption>\n","type":"Mdx","contentDigest":"002f6fc4a48962ba0865a0f10367dccd","counter":1170,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tag","description":"Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Tag\ndescription: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nUsing the IBM Design Language [color palette](https://www.ibm.com/design/language/elements/color), the tag text color should be 5 steps away from the tag background color\n\n## Typography\n\nTag text should be set in sentence case, and should only have one word. However, if more than one is necessary, then connect the words using a hyphen with no spaces.\n\n| Property   | Font-size (px/rem) | Font-weight   | Type token  |\n| ---------- | ------------------ | ------------- | ----------- |\n| `.bx--tag` | 12 / 0.75          | Regular / 400 | `$label-01` |\n\n## Structure\n\nAll tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 24px radius.\n\n| Class      | Property                    | px / rem | Spacing token |\n| ---------- | --------------------------- | -------- | ------------- |\n| `.bx--tag` | height                      | 24 / 1.5 | –             |\n| `.bx--tag` | radius                      | 24px     | –             |\n| `.bx--tag` | margin                      | 8 / 0.5  | `$spacing-03` |\n| `.bx--tag` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurementst](images/tag-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for a tag | px / rem</Caption>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/tag/style.mdx"}}}}