Skip to content
Fallback patternFly default logo

Main title

This is a full page demo.

This is a card
This is a card
This is a card
This is a card
This is a card
This is a card
This is a card
This is a card
This is a card
This is a card

Notifications

0 unread

  • Info notification: Read info notification title

    This is an info notification description.
    5 minutes ago

  • Default notification: Read recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

    This is a recommendation notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    10 minutes ago

  • Default notification: Read recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

    This is a recommendation notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    20 minutes ago

  • Warning notification: Read warning notification title

    This is a warning notification description.
    20 minutes ago

  • Success notification: Read success notification title

    This is a success notification description.
    30 minutes ago

  • Success notification: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.

    This example uses ".pf-m-truncate" to limit the title to a single line and truncate any overflow text with ellipses.
    40 minutes ago

  • Success notification: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.

    This example uses ".pf-m-truncate" and sets "--pf-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.
    50 minutes ago