@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,103 lines (1,079 loc) • 40.7 kB
Markdown
---
id: Alert
section: components
---## Demos
### Toast
```html isFullscreen
<div class="pf-v5-c-page" id="alert-basic-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-alert-basic-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="alert-basic-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="alert-basic-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="alert-basic-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-alert-basic-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
<ul class="pf-v5-c-alert-group pf-m-toast" role="list">
<li class="pf-v5-c-alert-group__item">
<div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
<div class="pf-v5-c-alert__icon">
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
</div>
<p class="pf-v5-c-alert__title">
<span class="pf-v5-screen-reader">Success alert:</span>
Newest notification
</p>
<div class="pf-v5-c-alert__action">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Close success alert: Newest notification"
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-alert__description">
<p>This is a description of the notification content.</p>
</div>
</div>
</li>
<li class="pf-v5-c-alert-group__item">
<div class="pf-v5-c-alert pf-m-warning" aria-label="Warning alert">
<div class="pf-v5-c-alert__icon">
<i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
</div>
<p class="pf-v5-c-alert__title">
<span class="pf-v5-screen-reader">Info alert:</span>
Second newest notification
</p>
<div class="pf-v5-c-alert__action">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Close warning alert: second newest notification"
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-alert__description">
<p>This is a description of the notification content.</p>
</div>
</div>
</li>
<li class="pf-v5-c-alert-group__item">
<div class="pf-v5-c-alert pf-m-danger" aria-label="Danger alert">
<div class="pf-v5-c-alert__icon">
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
</div>
<p class="pf-v5-c-alert__title">
<span class="pf-v5-screen-reader">Last notification</span>
Last notification
</p>
<div class="pf-v5-c-alert__action">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Close danger alert: Last notification"
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-alert__description">
<p>This is a description of the notification content.</p>
</div>
</div>
</li>
</ul>
```
### Inline Alert in Horizontal Form
```html isFullscreen
<div class="pf-v5-c-page" id="alert-horizontal-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-alert-horizontal-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="alert-horizontal-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="alert-horizontal-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="alert-horizontal-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-alert-horizontal-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-light">
<form class="pf-v5-c-form pf-m-limit-width pf-m-horizontal" novalidate>
<div class="pf-v5-c-form__alert">
<div
class="pf-v5-c-alert pf-m-danger pf-m-inline"
aria-label="Inline danger alert"
>
<div class="pf-v5-c-alert__icon">
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
</div>
<p class="pf-v5-c-alert__title">
<span class="pf-v5-screen-reader">Danger alert:</span>
Fill out all required fields before continuing.
</p>
</div>
</div>
<div class="pf-v5-c-form__group">
<div class="pf-v5-c-form__group-label"><label
class="pf-v5-c-form__label"
for="alert-horizontal-example-form-name"
>
<span class="pf-v5-c-form__label-text">Name</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v5-c-form__group-control">
<span class="pf-v5-c-form-control pf-m-required pf-m-error">
<input
required
type="text"
id="alert-horizontal-example-form-name"
name="alert-horizontal-example-form-name"
aria-invalid="true"
aria-describedby="alert-horizontal-example-form-name-helper"
/>
<span class="pf-v5-c-form-control__utilities">
<span class="pf-v5-c-form-control__icon pf-m-status">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
</span>
</span>
</span>
<div class="pf-v5-c-form__helper-text" aria-live="polite">
<div class="pf-v5-c-helper-text">
<div
class="pf-v5-c-helper-text__item pf-m-error"
id="alert-horizontal-example-form-name-helper"
>
<span class="pf-v5-c-helper-text__item-text">Required field</span>
</div>
</div>
</div>
</div>
</div>
<div class="pf-v5-c-form__group">
<div class="pf-v5-c-form__group-label"><label
class="pf-v5-c-form__label"
for="alert-horizontal-example-form-email"
>
<span class="pf-v5-c-form__label-text">Email</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v5-c-form__group-control">
<span class="pf-v5-c-form-control pf-m-required">
<input
required
type="text"
value="patternfly@patternfly.com"
id="alert-horizontal-example-form-email"
name="alert-horizontal-example-form-email"
/>
</span>
</div>
</div>
<div class="pf-v5-c-form__group">
<div class="pf-v5-c-form__group-label"><label
class="pf-v5-c-form__label"
for="alert-horizontal-example-form-phone"
>
<span class="pf-v5-c-form__label-text">Phone number</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v5-c-form__group-control">
<span class="pf-v5-c-form-control pf-m-required pf-m-error">
<input
required
type="text"
id="alert-horizontal-example-form-phone"
name="alert-horizontal-example-form-phone"
aria-invalid="true"
aria-describedby="alert-horizontal-example-form-phone-helper"
/>
<span class="pf-v5-c-form-control__utilities">
<span class="pf-v5-c-form-control__icon pf-m-status">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
</span>
</span>
</span>
<div class="pf-v5-c-form__helper-text" aria-live="polite">
<div class="pf-v5-c-helper-text">
<div
class="pf-v5-c-helper-text__item pf-m-error"
id="alert-horizontal-example-form-phone-helper"
>
<span class="pf-v5-c-helper-text__item-text">Required field</span>
</div>
</div>
</div>
</div>
</div>
<div
class="pf-v5-c-form__group"
role="group"
aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
>
<div
class="pf-v5-c-form__group-label pf-m-no-padding-top"
id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
><span
class="pf-v5-c-form__label"
for="alert-horizontal-example-form-check-group"
>
<span class="pf-v5-c-form__label-text">Your experience</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></span>
</div>
<div class="pf-v5-c-form__group-control">
<div class="pf-v5-c-form__helper-text" aria-live="polite">
<div class="pf-v5-c-helper-text">
<div
class="pf-v5-c-helper-text__item pf-m-error"
id="alert-horizontal-example-form-check-group-helper"
>
<span class="pf-v5-c-helper-text__item-icon">
<i
class="fas fa-fw fa-exclamation-circle"
aria-hidden="true"
></i>
</span>
<span
class="pf-v5-c-helper-text__item-text"
>This is a required field</span>
</div>
</div>
</div>
<div class="pf-v5-c-check">
<input
class="pf-v5-c-check__input"
type="checkbox"
id="alt-checkbox1"
name="alt-checkbox1"
/>
<label
class="pf-v5-c-check__label"
for="alt-checkbox1"
>Follow up via email.</label>
</div>
<div class="pf-v5-c-check">
<input
class="pf-v5-c-check__input"
type="checkbox"
id="alt-checkbox2"
name="alt-checkbox2"
/>
<label
class="pf-v5-c-check__label"
for="alt-checkbox2"
>Remember my password for 30 days.</label>
</div>
</div>
</div>
<div class="pf-v5-c-form__group pf-m-action">
<div class="pf-v5-c-form__group-control">
<div class="pf-v5-c-form__actions">
<button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
<button class="pf-v5-c-button pf-m-secondary" type="reset">Cancel</button>
</div>
</div>
</div>
</form>
</section>
</main>
</div>
```
### Inline Alert in Stacked Form
```html isFullscreen
<div class="pf-v5-c-page" id="alert-stacked-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-alert-stacked-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="alert-stacked-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="alert-stacked-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="alert-stacked-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-alert-stacked-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-light">
<form class="pf-v5-c-form pf-m-limit-width" novalidate>
<div class="pf-v5-c-form__alert">
<div
class="pf-v5-c-alert pf-m-danger pf-m-inline"
aria-label="Inline danger alert"
>
<div class="pf-v5-c-alert__icon">
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
</div>
<p class="pf-v5-c-alert__title">
<span class="pf-v5-screen-reader">Danger alert:</span>
Fill out all required fields before continuing.
</p>
</div>
</div>
<div class="pf-v5-c-form__group">
<div class="pf-v5-c-form__group-label"><label
class="pf-v5-c-form__label"
for="alert-stacked-example-form-name"
>
<span class="pf-v5-c-form__label-text">Full name</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v5-c-form__group-control">
<span class="pf-v5-c-form-control pf-m-required pf-m-error">
<input
required
type="text"
id="alert-stacked-example-form-name"
name="alert-stacked-example-form-name"
aria-invalid="true"
aria-describedby="alert-stacked-example-form-helper"
/>
<span class="pf-v5-c-form-control__utilities">
<span class="pf-v5-c-form-control__icon pf-m-status">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
</span>
</span>
</span>
<div class="pf-v5-c-form__helper-text" aria-live="polite">
<div class="pf-v5-c-helper-text">
<div
class="pf-v5-c-helper-text__item pf-m-error"
id="alert-stacked-example-form-name-helper"
>
<span class="pf-v5-c-helper-text__item-text">Required field</span>
</div>
</div>
</div>
</div>
</div>
<div class="pf-v5-c-form__group">
<div class="pf-v5-c-form__group-label"><label
class="pf-v5-c-form__label"
for="alert-stacked-example-form-email"
>
<span class="pf-v5-c-form__label-text">Email</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v5-c-form__group-control">
<span class="pf-v5-c-form-control pf-m-required">
<input
required
type="text"
value="patternfly.com"
id="alert-stacked-example-form-email"
name="alert-stacked-example-form-email"
/>
</span>
</div>
<div class="pf-v5-c-form__helper-text" aria-live="polite">
<div class="pf-v5-c-helper-text">
<div
class="pf-v5-c-helper-text__item pf-m-error"
id="alert-stacked-example-form-email-helper"
>
<span
class="pf-v5-c-helper-text__item-text"
>Enter a valid email address: example@gmail.com</span>
</div>
</div>
</div>
</div>
<div class="pf-v5-c-form__group">
<div class="pf-v5-c-form__group-label"><label
class="pf-v5-c-form__label"
for="alert-stacked-example-form-state"
>
<span class="pf-v5-c-form__label-text">State of residence</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<span class="pf-v5-c-form-control pf-m-required pf-m-error">
<select
class
required
aria-invalid="true"
id="select-group-error"
name="select-group-error"
aria-label="Error state select group example"
>
<option value>Select a state</option>
<option value="Option 1">CA</option>
<option value="Option 2">FL</option>
<option value="Option 3">MA</option>
<option value="Option 4">NY</option>
</select>
<span class="pf-v5-c-form-control__utilities">
<span class="pf-v5-c-form-control__icon pf-m-status">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
</span>
<span class="pf-v5-c-form-control__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</span>
<div
class="pf-v5-c-form__helper-text"
aria-live="polite"
id="alert-stacked-example-form-state-form-email-helper-state"
>
<div class="pf-v5-c-helper-text">
<div
class="pf-v5-c-helper-text__item pf-m-error"
id="alert-stacked-example-form-state-helper"
>
<span class="pf-v5-c-helper-text__item-text">Required field</span>
</div>
</div>
</div>
</div>
<div
class="pf-v5-c-form__group"
role="group"
aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
>
<div
class="pf-v5-c-form__group-label pf-m-no-padding-top"
id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
><span
class="pf-v5-c-form__label"
for="alert-stacked-example-form-check-group"
>
<span class="pf-v5-c-form__label-text">How can we contact you?</span> <span
class="pf-v5-c-form__label-required"
aria-hidden="true"
>*</span></span>
<div class="pf-v5-c-form__helper-text" aria-live="polite">
<div class="pf-v5-c-helper-text">
<div
class="pf-v5-c-helper-text__item pf-m-error"
id="alert-stacked-example-form-check-group-helper"
>
<span class="pf-v5-c-helper-text__item-icon">
<i
class="fas fa-fw fa-exclamation-circle"
aria-hidden="true"
></i>
</span>
<span
class="pf-v5-c-helper-text__item-text"
>This is a required field</span>
</div>
</div>
</div>
</div>
<div class="pf-v5-c-form__group-control pf-m-inline">
<div class="pf-v5-c-check">
<input
class="pf-v5-c-check__input"
type="checkbox"
id="alt-form-checkbox1"
name="alt-form-checkbox1"
/>
<label class="pf-v5-c-check__label" for="alt-form-checkbox1">Email</label>
</div>
<div class="pf-v5-c-check">
<input
class="pf-v5-c-check__input"
type="checkbox"
id="alt-form-checkbox2"
name="alt-form-checkbox2"
/>
<label class="pf-v5-c-check__label" for="alt-form-checkbox2">Phone</label>
</div>
<div class="pf-v5-c-check">
<input
class="pf-v5-c-check__input"
type="checkbox"
id="alt-form-checkbox3"
name="alt-form-checkbox3"
/>
<label class="pf-v5-c-check__label" for="alt-form-checkbox3">Mail</label>
</div>
</div>
</div>
<div class="pf-v5-c-form__group pf-m-action">
<div class="pf-v5-c-form__group-control">
<div class="pf-v5-c-form__actions">
<button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
<button class="pf-v5-c-button pf-m-secondary" type="reset">Cancel</button>
</div>
</div>
</div>
</form>
</section>
</main>
</div>
```