Popover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="default-popover" type="button" data-component="button"><span class="c-button__label">Click
me</span></button>
<div class="c-element c-popover" popover="auto" id="default-popover" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
    'attributeList' => [
        'popovertarget' => 'default-popover'
    ]
])
    Click me
@endbutton
@popover([
    'id' => 'default-popover'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate."
        ])
        @endcard
    @endelement
@endpopover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-left" type="button" data-component="button"><span class=
"c-button__label">Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="left" id="placement-popover-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the left relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-center" type="button" data-component="button"><span class=
"c-button__label">Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="center" id="placement-popover-center" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the center relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-right" type="button" data-component="button"><span class=
"c-button__label">Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="right" id="placement-popover-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the right relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
    'attributeList' => [
        'popovertarget' => 'placement-popover-left'
    ]
])
    Left
@endbutton
@popover([
    'id' => 'placement-popover-left',
    'horizontalPlacement' => 'left'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the left relative to the viewport."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-popover-center'
    ]
])
    Center
@endbutton
@popover([
    'id' => 'placement-popover-center',
    'horizontalPlacement' => 'center'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the center relative to the viewport."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-popover-right'
    ]
])
    Right
@endbutton
@popover([
    'id' => 'placement-popover-right',
    'horizontalPlacement' => 'right'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the right relative to the viewport."
        ])
        @endcard
    @endelement
@endpopover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-top" type="button" data-component="button"><span class=
"c-button__label">top</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-vertical-placement="top" id="placement-popover-top" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the top relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-center" type="button" data-component="button"><span class=
"c-button__label">Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-vertical-placement="center" id="placement-popover-center" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the center relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-bottom" type="button" data-component="button"><span class=
"c-button__label">bottom</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-vertical-placement="bottom" id="placement-popover-bottom" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the bottom relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
    'attributeList' => [
        'popovertarget' => 'placement-popover-top'
    ]
])
    top
@endbutton
@popover([
    'id' => 'placement-popover-top',
    'verticalPlacement' => 'top'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the top relative to the viewport."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-popover-center'
    ]
])
    Center
@endbutton
@popover([
    'id' => 'placement-popover-center',
    'verticalPlacement' => 'center'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the center relative to the viewport."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-popover-bottom'
    ]
])
    bottom
@endbutton
@popover([
    'id' => 'placement-popover-bottom',
    'verticalPlacement' => 'bottom'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the bottom relative to the viewport."
        ])
        @endcard
    @endelement
@endpopover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-top-left" type="button" data-component="button"><span class="c-button__label">Top
Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="top" id="placement-popover-top-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at top-left relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-top-center" type="button" data-component="button"><span class=
"c-button__label">Top Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="center" data-js-popover-vertical-placement="top" id="placement-popover-top-center" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at top-center relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-top-right" type="button" data-component="button"><span class=
"c-button__label">Top Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="top" id="placement-popover-top-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at top-right relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-center-left" type="button" data-component="button"><span class=
"c-button__label">Center Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="center" id="placement-popover-center-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at center-left relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-center-center" type="button" data-component="button"><span class=
"c-button__label">Center Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="center" data-js-popover-vertical-placement="center" id="placement-popover-center-center" data-component=
"element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at center-center relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-center-right" type="button" data-component="button"><span class=
"c-button__label">Center Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="center" id="placement-popover-center-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at center-right relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-bottom-left" type="button" data-component="button"><span class=
"c-button__label">Bottom Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id="placement-popover-bottom-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at bottom-left relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-bottom-center" type="button" data-component="button"><span class=
"c-button__label">Bottom Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="center" data-js-popover-vertical-placement="bottom" id="placement-popover-bottom-center" data-component=
"element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at bottom-center relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-popover-bottom-right" type="button" data-component="button"><span class=
"c-button__label">Bottom Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="bottom" id="placement-popover-bottom-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at bottom-right relative to the viewport.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-top-left'
	]
])
	Top Left
@endbutton
@popover([
	'id' => 'placement-popover-top-left',
	'horizontalPlacement' => 'left',
	'verticalPlacement' => 'top'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at top-left relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-top-center'
	]
])
	Top Center
@endbutton
@popover([
	'id' => 'placement-popover-top-center',
	'horizontalPlacement' => 'center',
	'verticalPlacement' => 'top'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at top-center relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-top-right'
	]
])
	Top Right
@endbutton
@popover([
	'id' => 'placement-popover-top-right',
	'horizontalPlacement' => 'right',
	'verticalPlacement' => 'top'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at top-right relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-center-left'
	]
])
	Center Left
@endbutton
@popover([
	'id' => 'placement-popover-center-left',
	'horizontalPlacement' => 'left',
	'verticalPlacement' => 'center'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at center-left relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-center-center'
	]
])
	Center Center
@endbutton
@popover([
	'id' => 'placement-popover-center-center',
	'horizontalPlacement' => 'center',
	'verticalPlacement' => 'center'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at center-center relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-center-right'
	]
])
	Center Right
@endbutton
@popover([
	'id' => 'placement-popover-center-right',
	'horizontalPlacement' => 'right',
	'verticalPlacement' => 'center'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at center-right relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-bottom-left'
	]
])
	Bottom Left
@endbutton
@popover([
	'id' => 'placement-popover-bottom-left',
	'horizontalPlacement' => 'left',
	'verticalPlacement' => 'bottom'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at bottom-left relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-bottom-center'
	]
])
	Bottom Center
@endbutton
@popover([
	'id' => 'placement-popover-bottom-center',
	'horizontalPlacement' => 'center',
	'verticalPlacement' => 'bottom'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at bottom-center relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

@button([
	'attributeList' => [
		'popovertarget' => 'placement-popover-bottom-right'
	]
])
	Bottom Right
@endbutton
@popover([
	'id' => 'placement-popover-bottom-right',
	'horizontalPlacement' => 'right',
	'verticalPlacement' => 'bottom'
])
	@element([
		'attributeList' => [
			'style' => 'width: 300px'
		]
	])
		@card([
			'heading' => "I'm a popover",
			'content' => "This popover is placed at bottom-right relative to the viewport."
		])
		@endcard
	@endelement
@endpopover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-left" type="button" data-component="button"><span class=
"c-button__label">Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="left" id="placement-relative-popover-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the left relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-center" type="button" data-component="button"><span class=
"c-button__label">Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="center" id="placement-relative-popover-center" data-component=
"element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the center relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-right" type="button" data-component="button"><span class=
"c-button__label">Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="right" id="placement-relative-popover-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the right relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-left'
    ]
])
    Left
@endbutton
@popover([
    'id' => 'placement-relative-popover-left',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'left'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the left relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-center'
    ]
])
    Center
@endbutton
@popover([
    'id' => 'placement-relative-popover-center',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'center'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the center relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-right'
    ]
])
    Right
@endbutton
@popover([
    'id' => 'placement-relative-popover-right',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'right'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the right relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-top" type="button" data-component="button"><span class=
"c-button__label">Top</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-vertical-placement="top" id="placement-relative-popover-top" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the top relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-center-y" type="button" data-component="button"><span class=
"c-button__label">Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-vertical-placement="center" id="placement-relative-popover-center-y" data-component=
"element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the center relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-bottom" type="button" data-component="button"><span class=
"c-button__label">Bottom</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-vertical-placement="bottom" id="placement-relative-popover-bottom" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at the bottom relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-top'
    ]
])
    Top
@endbutton
@popover([
    'id' => 'placement-relative-popover-top',
    'relativeToTrigger' => true,
    'verticalPlacement' => 'top'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the top relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-center-y'
    ]
])
    Center
@endbutton
@popover([
    'id' => 'placement-relative-popover-center-y',
    'relativeToTrigger' => true,
    'verticalPlacement' => 'center'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the center relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-bottom'
    ]
])
    Bottom
@endbutton
@popover([
    'id' => 'placement-relative-popover-bottom',
    'relativeToTrigger' => true,
    'verticalPlacement' => 'bottom'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at the bottom relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-top-left" type="button" data-component="button"><span class=
"c-button__label">Top Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="top" id=
"placement-relative-popover-top-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at top-left relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-top-center" type="button" data-component="button"><span class=
"c-button__label">Top Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="center" data-js-popover-vertical-placement="top" id=
"placement-relative-popover-top-center" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at top-center relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-top-right" type="button" data-component="button"><span class=
"c-button__label">Top Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="top" id=
"placement-relative-popover-top-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at top-right relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-center-left" type="button" data-component="button"><span class=
"c-button__label">Center Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="center" id=
"placement-relative-popover-center-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at center-left relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-center-center" type="button" data-component="button"><span class=
"c-button__label">Center Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="center" data-js-popover-vertical-placement="center" id=
"placement-relative-popover-center-center" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at center-center relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-center-right" type="button" data-component="button"><span class=
"c-button__label">Center Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="center" id=
"placement-relative-popover-center-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at center-right relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-bottom-left" type="button" data-component="button"><span class=
"c-button__label">Bottom Left</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
"placement-relative-popover-bottom-left" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at bottom-left relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-bottom-center" type="button" data-component="button"><span class=
"c-button__label">Bottom Center</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="center" data-js-popover-vertical-placement="bottom" id=
"placement-relative-popover-bottom-center" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at bottom-center relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div><button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="placement-relative-popover-bottom-right" type="button" data-component="button"><span class=
"c-button__label">Bottom Right</span></button>
<div class="c-element c-popover" popover="auto" data-js-popover-relative-to-trigger="true" data-js-popover-horizontal-placement="right" data-js-popover-vertical-placement="bottom" id=
"placement-relative-popover-bottom-right" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This popover is placed at bottom-right relative to its trigger element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-top-left'
    ]
])
    Top Left
@endbutton
@popover([
    'id' => 'placement-relative-popover-top-left',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'left',
    'verticalPlacement' => 'top'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at top-left relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-top-center'
    ]
])
    Top Center
@endbutton
@popover([
    'id' => 'placement-relative-popover-top-center',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'center',
    'verticalPlacement' => 'top'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at top-center relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-top-right'
    ]
])
    Top Right
@endbutton
@popover([
    'id' => 'placement-relative-popover-top-right',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'right',
    'verticalPlacement' => 'top'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at top-right relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-center-left'
    ]
])
    Center Left
@endbutton
@popover([
    'id' => 'placement-relative-popover-center-left',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'left',
    'verticalPlacement' => 'center'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at center-left relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-center-center'
    ]
])
    Center Center
@endbutton
@popover([
    'id' => 'placement-relative-popover-center-center',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'center',
    'verticalPlacement' => 'center'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at center-center relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-center-right'
    ]
])
    Center Right
@endbutton
@popover([
    'id' => 'placement-relative-popover-center-right',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'right',
    'verticalPlacement' => 'center'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at center-right relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-bottom-left'
    ]
])
    Bottom Left
@endbutton
@popover([
    'id' => 'placement-relative-popover-bottom-left',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'left',
    'verticalPlacement' => 'bottom'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at bottom-left relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-bottom-center'
    ]
])
    Bottom Center
@endbutton
@popover([
    'id' => 'placement-relative-popover-bottom-center',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'center',
    'verticalPlacement' => 'bottom'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at bottom-center relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

@button([
    'attributeList' => [
        'popovertarget' => 'placement-relative-popover-bottom-right'
    ]
])
    Bottom Right
@endbutton
@popover([
    'id' => 'placement-relative-popover-bottom-right',
    'relativeToTrigger' => true,
    'horizontalPlacement' => 'right',
    'verticalPlacement' => 'bottom'
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This popover is placed at bottom-right relative to its trigger element."
        ])
        @endcard
    @endelement
@endpopover

<button class="c-button c-button__filled c-button__filled--default c-button--md" popovertarget="backdrop-popover" type="button" data-component="button"><span class="c-button__label">Click
me</span></button>
<div class="c-element c-popover" popover="auto" data-popover-backdrop="true" id="backdrop-popover" data-component="element">
  <div class="c-element" style="width: 300px" data-component="element">
    <!-- card.blade.php -->
    <div class="c-card c-card--ratio-16-9" data-component="card">
      <div class="c-card__paint-container">
        <div class="c-card__body" data-component="card__body">
          <!-- group.blade.php -->
          <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
            <!-- group.blade.php -->
            <div class="c-group c-group--vertical" data-component="group">
              <!-- typography.blade.php   original: h2 -->
              <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                I'm a popover
              </h2>
            </div>
          </div><!-- typography.blade.php   original: p -->
          <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
            This is a popover with a backdrop.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

@button([
    'attributeList' => [
        'popovertarget' => 'backdrop-popover'
    ]
])
    Click me
@endbutton
@popover([
    'id' => 'backdrop-popover',
    'backdrop' => true
])
    @element([
        'attributeList' => [
            'style' => 'width: 300px'
        ]
    ])
        @card([
            'heading' => "I'm a popover",
            'content' => "This is a popover with a backdrop."
        ])
        @endcard
    @endelement
@endpopover