{"componentChunkName":"component---src-pages-components-ui-shell-header-style-mdx","path":"/components/UI-shell-header/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"UI shell header","description":"This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/UI-shell-header/style.mdx","titleType":"prepend","MdxNode":{"id":"ac3fbe9d-a978-53b0-a3a0-4c5512cc1b29","children":[],"parent":"22a0abde-af43-5f5c-9f38-437e146bb9e8","internal":{"content":"---\ntitle: UI shell header\ndescription: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n_Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the [IBM Design Langauge palette](https://www.ibm.com/design/language/elements/color#specifications)._\n\n| Class                       | Property         | Color value |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--header`               | background color | Gray 100    |\n| `.bx--header`               | border-bottom    | Gray 80     |\n| `.bx--header__name`         | text color       | Gray 10     |\n| `.bx--header__menu-trigger` | fill             | Gray 10     |\n| `.bx--header__nav::before`  | border           | Gray 80     |\n\n![ui shell header](images/header-style-1.png)\n\n### Menu-trigger\n\n| Class                              | Property         | Color value    |\n| ---------------------------------- | ---------------- | -------------- |\n| `.bx--header__menu-trigger`        | fill             | Gray 10        |\n| `.bx--header__menu-trigger:hover`  | background color | Gray 100-hover |\n| `.bx--header__menu-trigger:focus`  | border           | White          |\n| `.bx--header__menu-trigger:active` | background color | Gray 80        |\n\n<Row>\n<Column colLg={8}>\n\n![Menu trigger interactive states](images/header-style-5.png)\n\n<Caption>Menu-trigger interactive states</Caption>\n\n</Column>\n</Row>\n\n### Menu-item\n\n| Class                           | Property         | Color value    |\n| ------------------------------- | ---------------- | -------------- |\n| `.bx--header__menu-item`        | text color       | Gray 30        |\n| `.bx--header__menu-item`        | svg              | Gray 30        |\n| `.bx--header__menu-item:hover`  | background color | Gray 100-hover |\n| `.bx--header__menu-item:hover`  | text color       | Gray 10        |\n| `.bx--header__menu-item:hover`  | svg              | Gray 10        |\n| `.bx--header__menu-item:focus`  | border           | White          |\n| `.bx--header__menu-item:active` | background color | Gray 80        |\n| `.bx--header__menu-item:active` | text color       | Gray 10        |\n| `.bx--header__menu-item:active` | svg              | Gray 10        |\n\n<Row>\n<Column colLg={8}>\n\n![Menu item interactive states](images/header-style-6.png)\n\n<Caption>Sub-menu interactive states</Caption>\n\n</Column>\n</Row>\n\n### Sub-menu\n\n| Class                         | Property         | Color value   |\n| ----------------------------- | ---------------- | ------------- |\n| `.bx--header__submenu`        | background color | Gray 90       |\n| `.bx--header__submenu`        | text color       | Gray 30       |\n| `.bx--header__submenu:hover`  | background color | Gray 90-hover |\n| `.bx--header__submenu:hover`  | text color       | Gray 10       |\n| `.bx--header__submenu:focus`  | border           | White         |\n| `.bx--header__submenu:active` | background color | Gray 70       |\n| `.bx--header__submenu:active` | text color       | Gray 10       |\n\n![Sub-menu interactive states](images/header-style-7.png)\n\n<Caption></Caption>\n\n### Action\n\n| Class                        | Property         | Color value    |\n| ---------------------------- | ---------------- | -------------- |\n| `.bx--header__action`        | fill             | Gray 30        |\n| `.bx--header__action:hover`  | background color | Gray 100-hover |\n| `.bx--header__action:hover`  | fill             | Gray 10        |\n| `.bx--header__action:focus`  | border           | White          |\n| `.bx--header__action:active` | background color | Gray 80        |\n| `.bx--header__action:active` | fill             | Gray 10        |\n\n<Row>\n<Column colLg={8}>\n\n![Header action interactive states](images/header-style-8.png)\n\n<Caption>Header action interactive states</Caption>\n\n</Column>\n</Row>\n\n## Typography\n\nMenu labels and text should be set in sentence case.\n\n| Class                       | Font-size (px/rem) | Font-weight    | Type token       |\n| --------------------------- | ------------------ | -------------- | ---------------- |\n| `.bx--header__name`         | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n| `.bx--header__name--prefix` | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--header__menu-item`    | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n\n## Structure\n\nThe header should span the full width of the browser window. The header can either stay sticky to the top of the browser or scroll away.\n\n| Class                       | Property                    | px/rem  | Spacing token |\n| --------------------------- | --------------------------- | ------- | ------------- |\n| `.bx--header`               | height                      | 48 / 3  | –             |\n| `.bx--header__menu-trigger` | height, width               | 48 / 3  | –             |\n| `.bx--header__name`         | padding-left                | 16 / 1  | `$spacing-05` |\n| `.bx--header__name`         | padding-right               | 32 / 2  | `$spacing-07` |\n| `.bx--header__nav`          | padding-left                | 16 / 1  | `$spacing-05` |\n| `.bx--header__menu-item`    | padding-left, padding right | 16 / 1  | `$spacing-05` |\n| `.bx--header__menu-arrow`   | padding-left                | 8 / 0.5 | `$spacing-03` |\n| `.bx--header__submenu`      | padding-left, padding right | 16 / 1  | `$spacing-05` |\n| `.bx--header__action`       | height, width               | 48 / 3  | –             |\n\n![ui shell header spec](images/header-style-2.png)\n\n<Caption>\n  Structure and spacing measurements for UI shell header | px | rem\n</Caption>\n\n![ui shell header submenu spec](images/header-style-3.png)\n\n<Caption>\n  Structure and spacing measurements for header submenu | px | rem\n</Caption>\n\n### Responsive behavior\n\nIn smaller broswer windows, `menu items` in the header should collapse into the left side nav menu. Items that were once in the header should stack at the top of the side nav panel if other items were already present in the panel.\n\n![responsive behavior example](images/header-style-4.png)\n\n<Caption>Responsive behavior for UI shell header</Caption>\n","type":"Mdx","contentDigest":"d4e073398dcf606863e6dd09078e55ee","counter":1081,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell header","description":"This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: UI shell header\ndescription: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n_Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the [IBM Design Langauge palette](https://www.ibm.com/design/language/elements/color#specifications)._\n\n| Class                       | Property         | Color value |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--header`               | background color | Gray 100    |\n| `.bx--header`               | border-bottom    | Gray 80     |\n| `.bx--header__name`         | text color       | Gray 10     |\n| `.bx--header__menu-trigger` | fill             | Gray 10     |\n| `.bx--header__nav::before`  | border           | Gray 80     |\n\n![ui shell header](images/header-style-1.png)\n\n### Menu-trigger\n\n| Class                              | Property         | Color value    |\n| ---------------------------------- | ---------------- | -------------- |\n| `.bx--header__menu-trigger`        | fill             | Gray 10        |\n| `.bx--header__menu-trigger:hover`  | background color | Gray 100-hover |\n| `.bx--header__menu-trigger:focus`  | border           | White          |\n| `.bx--header__menu-trigger:active` | background color | Gray 80        |\n\n<Row>\n<Column colLg={8}>\n\n![Menu trigger interactive states](images/header-style-5.png)\n\n<Caption>Menu-trigger interactive states</Caption>\n\n</Column>\n</Row>\n\n### Menu-item\n\n| Class                           | Property         | Color value    |\n| ------------------------------- | ---------------- | -------------- |\n| `.bx--header__menu-item`        | text color       | Gray 30        |\n| `.bx--header__menu-item`        | svg              | Gray 30        |\n| `.bx--header__menu-item:hover`  | background color | Gray 100-hover |\n| `.bx--header__menu-item:hover`  | text color       | Gray 10        |\n| `.bx--header__menu-item:hover`  | svg              | Gray 10        |\n| `.bx--header__menu-item:focus`  | border           | White          |\n| `.bx--header__menu-item:active` | background color | Gray 80        |\n| `.bx--header__menu-item:active` | text color       | Gray 10        |\n| `.bx--header__menu-item:active` | svg              | Gray 10        |\n\n<Row>\n<Column colLg={8}>\n\n![Menu item interactive states](images/header-style-6.png)\n\n<Caption>Sub-menu interactive states</Caption>\n\n</Column>\n</Row>\n\n### Sub-menu\n\n| Class                         | Property         | Color value   |\n| ----------------------------- | ---------------- | ------------- |\n| `.bx--header__submenu`        | background color | Gray 90       |\n| `.bx--header__submenu`        | text color       | Gray 30       |\n| `.bx--header__submenu:hover`  | background color | Gray 90-hover |\n| `.bx--header__submenu:hover`  | text color       | Gray 10       |\n| `.bx--header__submenu:focus`  | border           | White         |\n| `.bx--header__submenu:active` | background color | Gray 70       |\n| `.bx--header__submenu:active` | text color       | Gray 10       |\n\n![Sub-menu interactive states](images/header-style-7.png)\n\n<Caption></Caption>\n\n### Action\n\n| Class                        | Property         | Color value    |\n| ---------------------------- | ---------------- | -------------- |\n| `.bx--header__action`        | fill             | Gray 30        |\n| `.bx--header__action:hover`  | background color | Gray 100-hover |\n| `.bx--header__action:hover`  | fill             | Gray 10        |\n| `.bx--header__action:focus`  | border           | White          |\n| `.bx--header__action:active` | background color | Gray 80        |\n| `.bx--header__action:active` | fill             | Gray 10        |\n\n<Row>\n<Column colLg={8}>\n\n![Header action interactive states](images/header-style-8.png)\n\n<Caption>Header action interactive states</Caption>\n\n</Column>\n</Row>\n\n## Typography\n\nMenu labels and text should be set in sentence case.\n\n| Class                       | Font-size (px/rem) | Font-weight    | Type token       |\n| --------------------------- | ------------------ | -------------- | ---------------- |\n| `.bx--header__name`         | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n| `.bx--header__name--prefix` | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--header__menu-item`    | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n\n## Structure\n\nThe header should span the full width of the browser window. The header can either stay sticky to the top of the browser or scroll away.\n\n| Class                       | Property                    | px/rem  | Spacing token |\n| --------------------------- | --------------------------- | ------- | ------------- |\n| `.bx--header`               | height                      | 48 / 3  | –             |\n| `.bx--header__menu-trigger` | height, width               | 48 / 3  | –             |\n| `.bx--header__name`         | padding-left                | 16 / 1  | `$spacing-05` |\n| `.bx--header__name`         | padding-right               | 32 / 2  | `$spacing-07` |\n| `.bx--header__nav`          | padding-left                | 16 / 1  | `$spacing-05` |\n| `.bx--header__menu-item`    | padding-left, padding right | 16 / 1  | `$spacing-05` |\n| `.bx--header__menu-arrow`   | padding-left                | 8 / 0.5 | `$spacing-03` |\n| `.bx--header__submenu`      | padding-left, padding right | 16 / 1  | `$spacing-05` |\n| `.bx--header__action`       | height, width               | 48 / 3  | –             |\n\n![ui shell header spec](images/header-style-2.png)\n\n<Caption>\n  Structure and spacing measurements for UI shell header | px | rem\n</Caption>\n\n![ui shell header submenu spec](images/header-style-3.png)\n\n<Caption>\n  Structure and spacing measurements for header submenu | px | rem\n</Caption>\n\n### Responsive behavior\n\nIn smaller broswer windows, `menu items` in the header should collapse into the left side nav menu. Items that were once in the header should stack at the top of the side nav panel if other items were already present in the panel.\n\n![responsive behavior example](images/header-style-4.png)\n\n<Caption>Responsive behavior for UI shell header</Caption>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/UI-shell-header/style.mdx"}}}}