{"componentChunkName":"component---src-pages-components-code-snippet-style-mdx","path":"/components/code-snippet/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Code snippet","description":"Code snippets are small blocks of reusable code that can be inserted in a code file.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/code-snippet/style.mdx","titleType":"prepend","MdxNode":{"id":"c15b0ed6-1578-53b9-bb83-8f82bf76f7b0","children":[],"parent":"bfe84f9b-3022-55d4-ab97-9becc6cdbe7e","internal":{"content":"---\ntitle: Code snippet\ndescription: Code snippets are small blocks of reusable code that can be inserted in a code file.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n### Single & multi-line\n\n| Class                       | Property         | Color token |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--snippet`              | background       | `$field-01` |\n| `.bx--snippet__icon`        | color            | `$icon-01`  |\n| `.bx--snippet-button:hover` | background-color | `$hover-ui` |\n| `.bx--snippet--light`       | background-color | `$field-02` |\n| `.bx--snippet--light:hover` | background-color | `$hover-ui` |\n\n### Inline snippet\n\n| Class                        | Property         | Color token |\n| ---------------------------- | ---------------- | ----------- |\n| `.bx--snippet--inline`       | background-color | `$field-01` |\n| `.bx--snippet--inline`       | color            | `$text-02`  |\n| `.bx--snippet--inline:hover` | background-color | `$hover-ui` |\n\n### Syntax colors\n\nCarbon has defined a set of accessible syntax colors. View an incontext [example](https://codepen.io/team/carbon/full/eKMBLw/) on CodePen.\n\n## Typography\n\n| Class                       | Font-size (px/rem) | Font-weight   | Type token |\n| --------------------------- | ------------------ | ------------- | ---------- |\n| `.bx--snippet.code`         | 12 / 0.75          | Regular / 400 | `$code-01` |\n| `.bx--snippet--inline.code` | 12 / 0.75          | Regular / 400 | `$code-01` |\n\n## Structure\n\n### Single line\n\n| Class                  | Property      | px / rem | Spacing token |\n| ---------------------- | ------------- | -------- | ------------- |\n| `.bx--snippet--single` | height        | 40 / 3   | –             |\n| `.bx--snippet--single` | max-width     | 768 / 48 | –             |\n| `.bx--snippet--single` | padding-right | 48 / 3   | `$spacing-09` |\n| `.bx--snippet--single` | padding-left  | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![](images/code-snippet-style-1.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for code snippet | px / rem\n</Caption>\n\n### Multi-line code snippet\n\n| Class                    | Property                    | px / rem                | Spacing token |\n| ------------------------ | --------------------------- | ----------------------- | ------------- |\n| `.bx--snippet--multi`    | min-height                  | 288 / 18                | –             |\n| `.bx--snippet--multi`    | max-height                  | Varies based on content | –             |\n| `.bx--snippet--multi`    | max-width                   | 768 / 48                | –             |\n| `.bx--snippet-container` | padding-top, padding-bottom | 16 / 1                  | `$spacing-05` |\n| `.bx--snippet-container` | padding-right               | 48 / 3                  | `$spacing-09` |\n| `.bx--snippet-container` | padding-left                | 16 / 1                  | `$spacing-05` |\n| `.bx--snippet__icon`     | height, width               | 16px                    | –             |\n| `.bx--snippet-button`    | height, width               | 32 / 2                  | –             |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for multi-line snippet](images/code-snippet-style-2.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for multi-line snippet | px / rem\n</Caption>\n\n### Inline code snippet\n\n| Class                       | Property                    | px / rem                | Spacing token |\n| --------------------------- | --------------------------- | ----------------------- | ------------- |\n| `.bx--snippet--inline`      | height                      | 16 / 1                  | –             |\n| `.bx--snippet--inline`      | width                       | Varies based on content | –             |\n| `.bx--snippet--inline`      | border-radius               | 2                       | -             |\n| `.bx--snippet--inline code` | padding-right, padding-left | 8 / 0.5                 | \\$spacing-03  |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for inline snippet](images/code-snippet-style-3.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for inline code snippet | px / rem\n</Caption>\n","type":"Mdx","contentDigest":"6d9f07d6624f9c5e4e6b030731b2cc50","counter":1101,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Code snippet","description":"Code snippets are small blocks of reusable code that can be inserted in a code file.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Code snippet\ndescription: Code snippets are small blocks of reusable code that can be inserted in a code file.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n### Single & multi-line\n\n| Class                       | Property         | Color token |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--snippet`              | background       | `$field-01` |\n| `.bx--snippet__icon`        | color            | `$icon-01`  |\n| `.bx--snippet-button:hover` | background-color | `$hover-ui` |\n| `.bx--snippet--light`       | background-color | `$field-02` |\n| `.bx--snippet--light:hover` | background-color | `$hover-ui` |\n\n### Inline snippet\n\n| Class                        | Property         | Color token |\n| ---------------------------- | ---------------- | ----------- |\n| `.bx--snippet--inline`       | background-color | `$field-01` |\n| `.bx--snippet--inline`       | color            | `$text-02`  |\n| `.bx--snippet--inline:hover` | background-color | `$hover-ui` |\n\n### Syntax colors\n\nCarbon has defined a set of accessible syntax colors. View an incontext [example](https://codepen.io/team/carbon/full/eKMBLw/) on CodePen.\n\n## Typography\n\n| Class                       | Font-size (px/rem) | Font-weight   | Type token |\n| --------------------------- | ------------------ | ------------- | ---------- |\n| `.bx--snippet.code`         | 12 / 0.75          | Regular / 400 | `$code-01` |\n| `.bx--snippet--inline.code` | 12 / 0.75          | Regular / 400 | `$code-01` |\n\n## Structure\n\n### Single line\n\n| Class                  | Property      | px / rem | Spacing token |\n| ---------------------- | ------------- | -------- | ------------- |\n| `.bx--snippet--single` | height        | 40 / 3   | –             |\n| `.bx--snippet--single` | max-width     | 768 / 48 | –             |\n| `.bx--snippet--single` | padding-right | 48 / 3   | `$spacing-09` |\n| `.bx--snippet--single` | padding-left  | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![](images/code-snippet-style-1.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for code snippet | px / rem\n</Caption>\n\n### Multi-line code snippet\n\n| Class                    | Property                    | px / rem                | Spacing token |\n| ------------------------ | --------------------------- | ----------------------- | ------------- |\n| `.bx--snippet--multi`    | min-height                  | 288 / 18                | –             |\n| `.bx--snippet--multi`    | max-height                  | Varies based on content | –             |\n| `.bx--snippet--multi`    | max-width                   | 768 / 48                | –             |\n| `.bx--snippet-container` | padding-top, padding-bottom | 16 / 1                  | `$spacing-05` |\n| `.bx--snippet-container` | padding-right               | 48 / 3                  | `$spacing-09` |\n| `.bx--snippet-container` | padding-left                | 16 / 1                  | `$spacing-05` |\n| `.bx--snippet__icon`     | height, width               | 16px                    | –             |\n| `.bx--snippet-button`    | height, width               | 32 / 2                  | –             |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for multi-line snippet](images/code-snippet-style-2.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for multi-line snippet | px / rem\n</Caption>\n\n### Inline code snippet\n\n| Class                       | Property                    | px / rem                | Spacing token |\n| --------------------------- | --------------------------- | ----------------------- | ------------- |\n| `.bx--snippet--inline`      | height                      | 16 / 1                  | –             |\n| `.bx--snippet--inline`      | width                       | Varies based on content | –             |\n| `.bx--snippet--inline`      | border-radius               | 2                       | -             |\n| `.bx--snippet--inline code` | padding-right, padding-left | 8 / 0.5                 | \\$spacing-03  |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for inline snippet](images/code-snippet-style-3.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for inline code snippet | px / rem\n</Caption>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/code-snippet/style.mdx"}}}}