Skip to content

Usage

---
import {Icon} from "@astrojs/starlight/components";
---

<div class="l-sidebar">
  <div class="is-sidebar">
    <Icon name="rocket" color="goldenrod" size="10rem" />
  </div>
  <div>
    <div class="l-stack">
      <h2>This is a fluid width column</h2>
      <p>
        If you resize me to be less than the value of the <code>min-width</code>
        property I will stack vertically and both columns will fill width of the
        container.
      </p>
    </div>
  </div>
</div>

For when you need a 2 column layout (1 fixed width, 1 fluid width).

Fixed Column (Sidebar)

The fixed width column is assigned the class .is-sidebar. Its width is determined by its content.

Fluid Column

The fluid width column shrinks with the viewport while the Sidebar is in a 2 column layout. When the width goes below --sb-min-width custom property, the layout will switch to a single column.