PF Next

Bullseye

Bullseye Example

Preview

content
<div class="pf-l-bullseye">
  <div class="pf-l-bullseye__item">
    content</div>
</div>

Documentation

Overview

Use a bullseye layout when there is a single child element, and that child is centered both vertically and horizontally in the parent.

Usage

Class Applied To Outcome
.pf-l-bullseye <div> Initializes the bullseye layout. A bullseye can only have one child.
.pf-l-bullseye__item <div> Explicitly sets the child for the bullseye. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.