Vertical Layout

Vertical layout places components from top to bottom. By default, its flex children is set to align-items: stretch;.

<cc-vertical-layout>
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>

Spacing

<cc-vertical-layout spacing="small">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<br />
<cc-vertical-layout spacing="medium">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<br />
<!-- default to standard -->
<cc-vertical-layout spacing="standard">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<br />
<cc-vertical-layout spacing="large">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>

Custom Spacing

<cc-vertical-layout style="--gap: 3rem;">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>

Padding

<cc-vertical-layout theme="padding" style="border: 1px solid #76B23B;">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>

Margin

<div style="border: 1px solid #333; border-radius: 8px;">
  <cc-vertical-layout theme="margin">
    <cc-button>Cancel</cc-button>
    <cc-button theme="primary">Save</cc-button>
  </cc-vertical-layout>
</div>

Margin && Padding

<div style="border: 1px solid #333; border-radius: 8px;">
  <cc-vertical-layout theme="margin padding" style="border: 1px solid #76B23B;">
    <cc-button>Cancel</cc-button>
    <cc-button theme="primary">Save</cc-button>
  </cc-vertical-layout>
</div>

Horizontal Alignment

This is not coming from component, just adding inline style.

<cc-vertical-layout style="align-items: flex-start;">
  <cc-button>Cancel</cc-button>
  <cc-button>Reset</cc-button>
  <cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-vertical-layout>

<cc-vertical-layout style="align-items: center;">
  <cc-button>Cancel</cc-button>
  <cc-button>Reset</cc-button>
  <cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-vertical-layout>

<cc-vertical-layout style="align-items: flex-end;">
  <cc-button>Cancel</cc-button>
  <cc-button>Reset</cc-button>
  <cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-vertical-layout>