docs (notifications): usage and style guidance for Callout

src/pages/components/notification/style.mdx

@@ -67,7 +67,7 @@ capitalized. Notification titles should be concise and to the point.
 
 ## Structure
 
-### Toast notification
+### Toast
 
 | Element      | Property                 | px / rem | Spacing token |
 | ------------ | ------------------------ | -------- | ------------- |
@@ -91,7 +91,7 @@ capitalized. Notification titles should be concise and to the point.
   Structure and spacing measurements for a toast notification | px / rem
 </Caption>
 
-### Inline notification
+### Inline
 
 The width of an _inline notification_ will vary based on content or layout.
 
@@ -114,3 +114,23 @@ The width of an _inline notification_ will vary based on content or layout.
 <Caption>
   Structure and spacing measurements for an inline notification | px / rem
 </Caption>
+
+### Callout
+
+The width of a _callout_ will vary based on content or layout.
+
+| Element      | Property                    | px / rem  | Spacing token |
+| ------------ | --------------------------- | --------- | ------------- |
+| Callout      | min-height                  | 48 / 3    | `$spacing-09` |
+|              | border-left                 | 3px       | –             |
+| Details      | margin-left, margin-right   | 16 / 1    | `$spacing-05` |
+| Text-wrapper | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |
+| Icon         | margin-right                | 16 / 1    | `$spacing-05` |
+
+<div className="image--fixed">
+
+![Structure and spacing for a callout | px / rem ](images/notification-style-callout.png)
+
+</div>
+
+<Caption>Structure and spacing for a callout | px / rem</Caption>