Using CSS Classes

Targeting elements

While the theme approach is the recommended way to customize the look and feel of the built-in notifications, the inner elements can also be targeted using the following classes:

Class	Block	Tag	Column
.Notivue__notification	Notification container	div	-
.Notivue__icon	SVG Icon	svg	1
.Notivue__content	Text Container	div	2
.Notivue__content-title	Title	h3	2
.Notivue__content-message	Message	p	2
.Notivue__close	Button	button	3
.Notivue__close-icon	Close Icon	svg	3

.Notivue__content-message {
  max-height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

To target each notification type, use the data-notivue attribute:

[data-notivue='error'] .Notivue__content-message {
  color: tomato;
}