## Notification ### Semantic Parts - list（`semantic-mark-list`）: Notification list root element, set positioning, z-index, width, scroll area and placement styles - listContent（`semantic-mark-listContent`）: Notification list content element, set notice layout, gap and height transition styles - root（`semantic-mark-root`）: Notice root element, set background color, border radius, shadow, padding and animation styles - wrapper（`semantic-mark-wrapper`）: Wrapper element for icon and content with content layout styles - icon（`semantic-mark-icon`）: Icon element, set absolute positioning, font size, line height and status color styles - section（`semantic-mark-section`）: Content section element that contains title and description - title（`semantic-mark-title`）: Title element, set color, font size, line height and margin styles - description（`semantic-mark-description`）: Description element, set font size, color and margin styles - actions（`semantic-mark-actions`）: Actions element, set float right, top margin and action button layout styles - close（`semantic-mark-close`）: Close button element, set position, size and interaction styles - progress（`semantic-mark-progress`）: Progress element, set progress styles for auto-closing notifications ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html

Hello World!

Hello World?

Welcome back!

This is another notification.

```