Stacks

Shorthand helpers that build on top of flexbox utilities to make component layouts faster and easier.

Create amazing Typeform-like forms and pages just by writing Markdown!

Overview #

Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts using the following classes:

  • .vstack — creates a vertical stack
  • .hstack — creates a horizontal stack

Vertical #

You can use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-{size} utilities to add space between items.

First
Second
Third
HTML
<!-- Vertical stack -->
<div class="vstack gap-2">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

Horizontal #

Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Please note, you can use horizontal margin utilities such as .ms-auto as spacers. Also, horizontal stacks work really well with vertical rules.

First
Second
Third
HTML
<!-- Horizontal stack -->
<div class="hstack gap-2">
  <div>First</div>
  <div>Second</div>
  <div class="vr ms-auto"></div>
  <div>Third</div>
</div>

Example #

Here's an example of a real-life UI/UX pattern: the ever ubiquitous to-do list.

Pick up groceries
Take a nap
HTML
<div class="card specific-w-300 mw-100 mx-auto">
  <div class="card-header"></div>
  <div class="card-body">
    <div class="hstack gap-2">
      <input class="form-control me-auto" type="text" placeholder="To-do item" aria-label="To-do item">
      <button type="button" class="btn btn-secondary">Submit</button>
      <div class="vr"></div>
      <button type="button" class="btn btn-danger" aria-label="Reset">
        <i class="fa-regular fa-trash-can"></i>
      </button>
    </div>
    <div class="vstack gap-1 border-top mt-3">
      <div class="d-flex align-items-center py-1 border-bottom">
        <button type="button" class="btn btn-secondary btn-sm me-2" aria-label="Set to complete" aria-describedby="item-1">
          <i class="fa-solid fa-check"></i>
        </button>
        <span id="item-1">Pick up groceries</span>
      </div>
      <div class="d-flex align-items-center py-1 border-bottom">
        <button type="button" class="btn btn-primary btn-sm me-2" aria-label="Reset" aria-describedby="item-2">
          <i class="fa-solid fa-check"></i>
        </button>
        <span id="item-2" class="text-decoration-line-through">Take a nap</span>
      </div>
    </div>
  </div>
</div>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).

Up next
Stretched link

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.