{"componentChunkName":"component---src-pages-components-tag-style-mdx","path":"/components/tag/style/","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","Accessibility"]},"relativePagePath":"/components/tag/style.mdx","titleType":"prepend","MdxNode":{"id":"6b2f7daa-7c4e-53fe-a356-d1a62f782709","children":[],"parent":"40de1be7-9801-513d-a954-75eb2b45d323","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', 'Accessibility']\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":"a7f16c0161daeb74216e6027cfcf5ac0","counter":1577,"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","Accessibility"]},"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', 'Accessibility']\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":"/zeit/2c7f9303/src/pages/components/tag/style.mdx"}}}}