Flank

’Use the `hds-flank` class to position two items side-by-side, with one item positioned alongside, or flanking, content that stretches to fill the available space.

Flank is a set of layout utility classes to help you organize content that can adapt to any device or screen size.

When space is limited, the items wrap.

<div class="hds-flank">
  <div></div>
  <div></div>
</div>

Examples

Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.

<div class="hds-flank:end">
  <sl-input size="medium">
    <sl-icon slot="prefix" name="magnifying-glass"></sl-icon>
  </sl-input>
  <sl-button>Search</sl-button>
</div>

Gandalf

All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.

Boromir

One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there that does not sleep, and the Great Eye is ever watchful.

Galadriel

The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was is lost, for none now live who remember it.

<div class="hds-stack hds-gap-xl">
  <div class="hds-flank hds-align-items-start">
    <sl-avatar
      image="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20"
      label="Gandalf's avatar"
    ></sl-avatar>
    <div class="hds-stack hds-gap-xs">
      <strong>Gandalf</strong>
      <p class="hds-body-s">
        All we have to decide is what to do with the time that is given to us. There are other forces at work in this
        world, Frodo, besides the will of evil.
      </p>
    </div>
  </div>
  <div class="hds-flank hds-align-items-start">
    <sl-avatar
      image="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20"
      label="Boromir's avatar"
    ></sl-avatar>
    <div class="hds-stack hds-gap-xs">
      <strong>Boromir</strong>
      <p class="hds-body-s">
        One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there
        that does not sleep, and the Great Eye is ever watchful.
      </p>
    </div>
  </div>
  <div class="hds-flank hds-align-items-start">
    <sl-avatar
      image="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20"
      label="Galadriel's avatar"
    ></sl-avatar>
    <div class="hds-stack hds-gap-xs">
      <strong>Galadriel</strong>
      <p class="hds-body-s">
        The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was
        is lost, for none now live who remember it.
      </p>
    </div>
  </div>
</div>

Position

By default, the first item in the hds-flank container will flank the other content. You can specify whether the first or last item will flank the remaining content by appending :start or :end to the hds-flank class.

<div class="hds-stack">
  <div class="hds-flank:start">
    <div></div>
    <div></div>
  </div>
  <div class="hds-flank:end">
    <div></div>
    <div></div>
  </div>
</div>

Sizing

The flank’s inline size is determined by the size of its content, but you can set a target size using the --flank-size property. When the flank wraps, it stretches to fill the inline size of the container.

<div class="hds-stack">
  <div class="hds-flank" style="--flank-size: 200px;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-flank" style="--flank-size: 6rem;">
    <div></div>
    <div></div>
  </div>
</div>

The main content fills the remaining inline space of the container. By default, the items wrap when the main content is less than 50% of the container. You can change the minimum size of the main content with the --content-percentage property.

<div class="hds-stack">
  <div class="hds-flank" style="--content-percentage: 70%;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-flank" style="--content-percentage: 85%;">
    <div></div>
    <div></div>
  </div>
</div>

Align Items

By default, items are centered in the block direction of the hds-flank container. You can add any of the following hds-align-items-* classes to an element with hds-flank to specify how items are aligned in the block direction:

hds-align-items-start
hds-align-items-end
hds-align-items-center
hds-align-items-stretch
hds-align-items-baseline

<div class="hds-stack">
  <div class="hds-flank hds-align-items-start" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-flank hds-align-items-end" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-flank hds-align-items-center" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-flank hds-align-items-stretch" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
</div>

Gap

By default, the gap between flank items uses hds-gap-base from your theme. You can add any of the following hds-gap-* classes to an element with hds-flank to specify the gap between items:

hds-gap-0
hds-gap-xs
hds-gap-sm
hds-gap-base
hds-gap-lg
hds-gap-xl

<div class="hds-stack hds-gap-xs">
  <div class="hds-flank">
    <div></div>
    <div></div>
  </div>
  <div class="hds-flank hds-gap-xl">
    <div></div>
    <div></div>
  </div>
</div>