Notification
The Notification component is a simple colored block meant to draw the attention to the user about something.
Example #
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Colors #
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Link">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Success">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Danger">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Light colors #
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Link" ShowLightVersion="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Primary" ShowLightVersion="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Info" ShowLightVersion="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Success" ShowLightVersion="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Warning" ShowLightVersion="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut pretium sollicitudin, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
<Notification Color="NotificationColor.Danger" ShowLightVersion="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
Aliquam erat volutpat.
</Notification>
Hide delete button #
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a gravida consectetur,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus
convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum
justo eget mauris.
<Notification Color="NotificationColor.Link" HideDeleteButton="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
eros velit ultricies nulla, nec scelerisque nunc risus id neque.
Vestibulum venenatis, arcu ut <a>pretium sollicitudin</a>, ligula metus
convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget
tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
justo eget mauris.
</Notification>