Inset

Utilities for positioning offsets.

Quick reference

Class	Styles
af-inset-0	inset: 0
af-top-0	top: 0
af-right-0	right: 0
af-bottom-0	bottom: 0
af-left-0	left: 0

Available classes

• af-inset-0 (all edges)
• af-top-0 / af-right-0 / af-bottom-0 / af-left-0 (individual edges)

Examples

Full overlay

Overlay

<div class="af-pos-relative af-border af-radius-md" style="height: 7rem;">
  <div class="af-pos-absolute af-inset-0 af-badge" style="display: grid; place-items: center;">
    Overlay
  </div>
</div>

Pin to corners

TL

TR

BL

BR

<div class="af-pos-relative af-border af-radius-md" style="height: 7rem;">
  <div class="af-pos-absolute af-top-0 af-left-0 af-badge">
    TL
  </div>
  <div class="af-pos-absolute af-top-0 af-right-0 af-badge">
    TR
  </div>
  <div class="af-pos-absolute af-bottom-0 af-left-0 af-badge">
    BL
  </div>
  <div class="af-pos-absolute af-bottom-0 af-right-0 af-badge">
    BR
  </div>
</div>

Related

• Position