{"componentChunkName":"component---src-pages-components-notification-style-mdx","path":"/components/notification/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/notification/style.mdx","titleType":"prepend","MdxNode":{"id":"9a405b33-748e-5cbf-9a49-755eb3787688","children":[],"parent":"c3318eeb-036a-5d12-ad1d-266a6c36874a","internal":{"content":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ---------------------- |\n| `title` | text color | `$text-01` |\n| `subtitle` | text color | `$text-01` |\n| `close-icon` | fill | `$icon-01` |\n| `notification--error` | background-color | `#fff0f1` |\n| `notification--error` | border-left | `$support-01` |\n| `svg.error--filled` | fill | `$support-01` |\n| `notification--success` | background-color | `#dafbe4` |\n| `notification--success` | border-left | `$support-02` |\n| `svg.checkmark-filled` | fill | `$support-02` |\n| `notification--warning` | background-color | `#fff0f1` |\n| `notification--warning` | border-left | `$support-03` |\n| `svg.warning-filled` | fill | `$support-03` |\n| `notification--info` | background-color | `rgba(253,209,58,.15)` |\n| `notification--info` | border-left | `$support-04` |\n\n## Typography\n\nNotification text should be set in sentence case with only the first word capitalized. Notification titles should be concise and to the point.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- |\n| `.bx--toast-notification__title`
`.bx--inline-notification__title` | 14 / 0.875 | SemiBold / 600 | `$heading-03` |\n| `.bx--toast-notification__subtitle`
`.bx--inline-notification__subtitle` | 14 / 0.875 | Regular / 400 | `$body-short-01` | |\n\n## Structure\n\n### Toast notification\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | ------------------------ | -------- | ------------- |\n| `.bx--toast-notification` | width | 288 / 18 | – |\n| `.bx--toast-notification` | border-left | 3px | – |\n| `.bx--toast-notification` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__title` | margin-top | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__subtitle` | margin-bottom | 24 / 1.5 | `$spacing-06` |\n| `.bx--toast-notification__details` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__caption` | margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | margin-top, margin-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a toast notification | px / rem\n\n\n### Inline notification\n\nThe width of an _inline notification_ will vary based on content or layout.\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--inline-notification` | min-height | 48 / 3 | `$spacing-09` |\n| `.bx--inline-notification` | border-left | 3px | – |\n| `.bx--inline-notification__details` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__text-wrapper` | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |\n| `.bx--inline-notification__icon` | margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | icon size | 16 x 16 | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a inline notification | px / rem\n\n","type":"Mdx","contentDigest":"2e25351bb97f88e0f3cd0b106c4c678d","counter":1136,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ---------------------- |\n| `title` | text color | `$text-01` |\n| `subtitle` | text color | `$text-01` |\n| `close-icon` | fill | `$icon-01` |\n| `notification--error` | background-color | `#fff0f1` |\n| `notification--error` | border-left | `$support-01` |\n| `svg.error--filled` | fill | `$support-01` |\n| `notification--success` | background-color | `#dafbe4` |\n| `notification--success` | border-left | `$support-02` |\n| `svg.checkmark-filled` | fill | `$support-02` |\n| `notification--warning` | background-color | `#fff0f1` |\n| `notification--warning` | border-left | `$support-03` |\n| `svg.warning-filled` | fill | `$support-03` |\n| `notification--info` | background-color | `rgba(253,209,58,.15)` |\n| `notification--info` | border-left | `$support-04` |\n\n## Typography\n\nNotification text should be set in sentence case with only the first word capitalized. Notification titles should be concise and to the point.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- |\n| `.bx--toast-notification__title`
`.bx--inline-notification__title` | 14 / 0.875 | SemiBold / 600 | `$heading-03` |\n| `.bx--toast-notification__subtitle`
`.bx--inline-notification__subtitle` | 14 / 0.875 | Regular / 400 | `$body-short-01` | |\n\n## Structure\n\n### Toast notification\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | ------------------------ | -------- | ------------- |\n| `.bx--toast-notification` | width | 288 / 18 | – |\n| `.bx--toast-notification` | border-left | 3px | – |\n| `.bx--toast-notification` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__title` | margin-top | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__subtitle` | margin-bottom | 24 / 1.5 | `$spacing-06` |\n| `.bx--toast-notification__details` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__caption` | margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | margin-top, margin-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a toast notification | px / rem\n\n\n### Inline notification\n\nThe width of an _inline notification_ will vary based on content or layout.\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--inline-notification` | min-height | 48 / 3 | `$spacing-09` |\n| `.bx--inline-notification` | border-left | 3px | – |\n| `.bx--inline-notification__details` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__text-wrapper` | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |\n| `.bx--inline-notification__icon` | margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | icon size | 16 x 16 | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a inline notification | px / rem\n\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/notification/style.mdx"}}}}