Stack

Vertical stacking layout for arranging items in a column.

Class reference

Class	Purpose	Gap Size	Example
af-stack	Default vertical stack	Medium (gap-md)	<div class="af-stack">
af-stack-sm	Small gap stack	Small (gap-sm)	<div class="af-stack-sm">
af-stack-md	Medium gap stack	Medium (gap-md)	<div class="af-stack-md">
af-stack-lg	Large gap stack	Large (gap-lg)	<div class="af-stack-lg">
af-stack-xl	Extra large gap stack	XL (gap-xl)	<div class="af-stack-xl">

Basic stack

Code Live

<div class="af-stack">
  <div class="af-card">Item 1</div>
  <div class="af-card">Item 2</div>
  <div class="af-card">Item 3</div>
</div>

Item 1

Item 2

Item 3

Stack sizes

Code Live

<div class="af-stack-sm">Small spacing</div>
<div class="af-stack">Default spacing (md)</div>
<div class="af-stack-md">Medium spacing (same as default)</div>
<div class="af-stack-lg">Large spacing</div>

Small gap

Small gap

Default gap

Default gap

Large gap

Large gap

Override the default gap with gap utilities: af-stack af-gap-lg.

Responsive variants

All stack classes support @{bp} suffixes. See Responsive Suffix.

<div class="af-stack af-stack-lg@md">
  <!-- Medium gap on mobile, large gap on tablet+ -->
</div>

Related

• Inline
• Spacer
• Layouts