{"componentChunkName":"component---src-pages-components-tag-style-mdx","path":"/components/tag/style/","result":{"pageContext":{"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":"3b0019d8-06c9-561a-824c-19ca7a7b3fa8","children":[],"parent":"f0037aac-69f2-56b4-a242-3bea910b8ffe","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":"140d709bff3d3d37b69eefc455c03b8d","counter":1584,"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/1dde86ed/src/pages/components/tag/style.mdx"}}}}