Inline
Horizontal layout with wrapping for arranging items in a row.
Class reference
Section titled “Class reference”| Class | Purpose | Gap Size | Example |
|---|---|---|---|
af-inline | Default horizontal wrap | Medium (gap-md) | <div class="af-inline"> |
af-inline-sm | Small gap inline | Small (gap-sm) | <div class="af-inline-sm"> |
af-inline-md | Medium gap inline | Medium (gap-md) | <div class="af-inline-md"> |
af-inline-lg | Large gap inline | Large (gap-lg) | <div class="af-inline-lg"> |
af-inline-xl | Extra large gap inline | XL (gap-xl) | <div class="af-inline-xl"> |
Basic inline
Section titled “Basic inline”<div class="af-inline">
<button class="af-btn">Button 1</button>
<button class="af-btn">Button 2</button>
<button class="af-btn">Button 3</button>
</div>Inline sizes
Section titled “Inline sizes”<div class="af-inline-sm">Small spacing</div>
<div class="af-inline">Default spacing (md)</div>
<div class="af-inline-lg">Large spacing</div>
<div class="af-inline-xl">XL spacing</div>Justify content
Section titled “Justify content”Combine with justify utilities when you need a custom alignment. For common cases, prefer Cluster or Spread.
<div class="af-inline af-justify-start">Start aligned</div>
<div class="af-inline af-justify-center">Center aligned</div>
<div class="af-inline af-justify-end">End aligned</div>
<div class="af-inline af-justify-between">Space between</div>