> Markdown version of [Styling](https://vaadin.com/docs/v24/components/notification/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

- Root element

  `vaadin-notification-card`

### <a id="parts"></a>Parts

- Notification card

  `vaadin-notification-card::part(overlay)`

- Content wrapper

  `vaadin-notification-card::part(content)`

### <a id="style-variants"></a>Style Variants

- Success

  `vaadin-notification-card[theme="success"]`

- Warning

  `vaadin-notification-card[theme="warning"]`

- Error

  `vaadin-notification-card[theme="error"]`

- Primary

  `vaadin-notification-card[theme="primary"]`

- Contrast

  `vaadin-notification-card[theme="contrast"]`