General

Frame

New

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A muted container that groups panels with a header and footer, separated or stacked.

Usage#

app.component.ts

import { WDS_FRAME } from '@wds/angular/frame';

Examples#

Default#

Frame title

Frame description

Frame content

Frame footer

Show code

frame-default.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameFooterComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-default-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent, WdsFrameFooterComponent],
  template: `
    <wds-frame class="w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>Frame title</wds-frame-title>
        <wds-frame-description>Frame description</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>Frame content</wds-frame-panel>
      <wds-frame-footer>Frame footer</wds-frame-footer>
    </wds-frame>
  `,
})
export class FrameDefaultDemo {}

Separated panels#

Panels are separate cards with a small space between them, which grows with spacing.

Section header

Description for the section

Separated panel

Section description

Separated panel

Section description

Show code

frame-separated.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-separated-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent],
  template: `
    <wds-frame class="w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>Section header</wds-frame-title>
        <wds-frame-description>Description for the section</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Separated panel</h2>
        <p class="m-0 text-sm text-muted-foreground">Section description</p>
      </wds-frame-panel>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Separated panel</h2>
        <p class="m-0 text-sm text-muted-foreground">Section description</p>
      </wds-frame-panel>
    </wds-frame>
  `,
})
export class FrameSeparatedDemo {}

Stacked panels#

stacked joins adjacent panels into one block: no space, no inner corners and a single border between them.

Section header

Description for the section

Stacked panel

Section description

Stacked panel

Section description

Show code

frame-stacked.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-stacked-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent],
  template: `
    <wds-frame stacked class="w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>Section header</wds-frame-title>
        <wds-frame-description>Description for the section</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Stacked panel</h2>
        <p class="m-0 text-sm text-muted-foreground">Section description</p>
      </wds-frame-panel>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Stacked panel</h2>
        <p class="m-0 text-sm text-muted-foreground">Section description</p>
      </wds-frame-panel>
    </wds-frame>
  `,
})
export class FrameStackedDemo {}

Dense#

dense removes the inset around the panels, so they sit flush with the frame border.

Section header

Description for the section

Dense panel

Section description

Dense panel

Section description

Show code

frame-dense.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-dense-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent],
  template: `
    <wds-frame stacked dense class="w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>Section header</wds-frame-title>
        <wds-frame-description>Description for the section</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Dense panel</h2>
        <p class="m-0 text-sm text-muted-foreground">Section description</p>
      </wds-frame-panel>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Dense panel</h2>
        <p class="m-0 text-sm text-muted-foreground">Section description</p>
      </wds-frame-panel>
    </wds-frame>
  `,
})
export class FrameDenseDemo {}

Without outer border#

variant="ghost" drops the outer border.

No outer border

This frame uses variant="ghost" to remove the outer border.

The outer container of this frame has no border, only the background and panels are visible.

Show code

frame-ghost.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-ghost-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent],
  template: `
    <wds-frame variant="ghost" class="w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>No outer border</wds-frame-title>
        <wds-frame-description>This frame uses variant="ghost" to remove the outer border.</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>
        <p class="m-0 text-sm text-muted-foreground">
          The outer container of this frame has no border, only the background and panels are visible.
        </p>
      </wds-frame-panel>
    </wds-frame>
  `,
})
export class FrameGhostDemo {}

Inverse#

variant="inverse" swaps the backgrounds: the frame takes the page background and the panels a muted one.

Inverse

The frame takes the page background, the panels a muted one.

Billing

Next invoice on November 1

Usage

12,480 of 20,000 requests this month

Show code

frame-inverse.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-inverse-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent],
  template: `
    <wds-frame variant="inverse" class="w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>Inverse</wds-frame-title>
        <wds-frame-description>The frame takes the page background, the panels a muted one.</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Billing</h2>
        <p class="m-0 text-sm text-muted-foreground">Next invoice on November 1</p>
      </wds-frame-panel>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Usage</h2>
        <p class="m-0 text-sm text-muted-foreground">12,480 of 20,000 requests this month</p>
      </wds-frame-panel>
    </wds-frame>
  `,
})
export class FrameInverseDemo {}

Spacing#

spacing sets the padding of the panels, header and footer. The header and footer stay aligned with the panel content.

spacing="xs"

Panel content

spacing="sm"

Panel content

spacing="default"

Panel content

spacing="lg"

Panel content

Show code

frame-spacing.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-spacing-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFramePanelComponent],
  template: `
    <div class="grid w-full gap-4 sm:grid-cols-2">
      <wds-frame spacing="xs">
        <wds-frame-header>
          <wds-frame-title>spacing="xs"</wds-frame-title>
        </wds-frame-header>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
      </wds-frame>
      <wds-frame spacing="sm">
        <wds-frame-header>
          <wds-frame-title>spacing="sm"</wds-frame-title>
        </wds-frame-header>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
      </wds-frame>
      <wds-frame spacing="default">
        <wds-frame-header>
          <wds-frame-title>spacing="default"</wds-frame-title>
        </wds-frame-header>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
      </wds-frame>
      <wds-frame spacing="lg">
        <wds-frame-header>
          <wds-frame-title>spacing="lg"</wds-frame-title>
        </wds-frame-header>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
        <wds-frame-panel>
          <p class="m-0 text-sm text-muted-foreground">Panel content</p>
        </wds-frame-panel>
      </wds-frame>
    </div>
  `,
})
export class FrameSpacingDemo {}

Custom radius#

--wds-frame-radius sets the outer radius. The panel radius follows it, minus the inset, so both corners stay parallel.

Server logs

Recent activity and errors

Auth service

Successfully logged in user: admin

Database

Query execution time: 12ms

Storage

Upload complete: image.png

Show code

frame-radius.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-radius-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent],
  template: `
    <wds-frame stacked class="w-full max-w-sm" style="--wds-frame-radius: 6px">
      <wds-frame-header>
        <wds-frame-title>Server logs</wds-frame-title>
        <wds-frame-description>Recent activity and errors</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Auth service</h2>
        <p class="m-0 text-sm text-muted-foreground">Successfully logged in user: admin</p>
      </wds-frame-panel>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Database</h2>
        <p class="m-0 text-sm text-muted-foreground">Query execution time: 12ms</p>
      </wds-frame-panel>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Storage</h2>
        <p class="m-0 text-sm text-muted-foreground">Upload complete: image.png</p>
      </wds-frame-panel>
    </wds-frame>
  `,
})
export class FrameRadiusDemo {}

wds-frame-footer holds notes or actions below the panels.

Team members

Invite people to collaborate on this project.

Owner

[email protected]

1 of 5 seats used

Invite

Show code

frame-footer.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameFooterComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-frame-footer-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent, WdsFrameFooterComponent, WdsButtonComponent],
  template: `
    <wds-frame class="w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>Team members</wds-frame-title>
        <wds-frame-description>Invite people to collaborate on this project.</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel>
        <h2 class="m-0 text-sm font-semibold">Owner</h2>
        <p class="m-0 text-sm text-muted-foreground">olivia&#64;example.com</p>
      </wds-frame-panel>
      <wds-frame-footer>
        <div class="flex items-center justify-between gap-2">
          <p class="m-0 text-sm text-muted-foreground">1 of 5 seats used</p>
          <wds-button size="sm">Invite</wds-button>
        </div>
      </wds-frame-footer>
    </wds-frame>
  `,
})
export class FrameFooterDemo {}

Fit#

In a frame with a set height, panels fill the remaining space. fit sizes a panel to its content.

Fit

Panels fill the height of the frame unless they have fit.

fit: sized to its content

Fills the remaining height

Show code

frame-fit.ts

import { Component } from '@angular/core';
import { WdsFrameComponent, WdsFrameDescriptionComponent, WdsFrameHeaderComponent, WdsFramePanelComponent, WdsFrameTitleComponent } from '@wds/angular/frame';

@Component({
  selector: 'app-frame-fit-demo',
  imports: [WdsFrameComponent, WdsFrameHeaderComponent, WdsFrameTitleComponent, WdsFrameDescriptionComponent, WdsFramePanelComponent],
  template: `
    <wds-frame class="h-72 w-full max-w-md">
      <wds-frame-header>
        <wds-frame-title>Fit</wds-frame-title>
        <wds-frame-description>Panels fill the height of the frame unless they have fit.</wds-frame-description>
      </wds-frame-header>
      <wds-frame-panel fit>
        <p class="m-0 text-sm text-muted-foreground">fit: sized to its content</p>
      </wds-frame-panel>
      <wds-frame-panel>
        <p class="m-0 text-sm text-muted-foreground">Fills the remaining height</p>
      </wds-frame-panel>
    </wds-frame>
  `,
})
export class FrameFitDemo {}

API References#

wds-frame#

Frame: a muted container that groups panels with an optional header and footer. Panels sit inside the frame's corner (concentric radius); stacked joins them into one block.

Attributes

Attribute	Type	Default	Description
variant	WdsFrameVariant	'default'	Visual style: `inverse` swaps the backgrounds of the frame and the panels, `ghost` drops the outer border.
spacing	WdsFrameSpacing	'default'	Padding of the panels, header and footer, and the space between separated panels.
stacked	boolean	false	Joins adjacent panels into one block: no space, no inner corners, a single border between them.
dense	boolean	false	Removes the inset around the panels: they sit flush with the frame border.

Slots

Slot	Description
(default)	`wds-frame-header`, `wds-frame-panel` and `wds-frame-footer` elements.

CSS parts (::part)

Part	Description
frame	The frame container.

CSS custom properties

Property	Description
--wds-frame-radius	Outer border radius (default `--wds-radius-xl`).
--wds-frame-panel-radius	Radius of the panels (default: the outer radius minus the inset).
--wds-frame-gap	Space between the header, panels and footer (default 3px).
--wds-frame-padding	Inset of the panels from the frame edge (default 3px).
--wds-frame-background	Frame background.
--wds-frame-border	Frame border color.
--wds-frame-panel-background	Panel background.
--wds-frame-panel-border	Panel border color.

wds-frame-panel#

Frame panel: a raised card inside wds-frame. Its padding follows the frame's spacing.

Attributes

Attribute	Type	Default	Description
fit	boolean	false	Sizes the panel to its content instead of filling the remaining height of the frame.

Slots

Slot	Description
(default)	Panel content.

CSS custom properties

Property	Description
--wds-frame-panel-padding	Inner padding (by default from the frame's `spacing`).

wds-frame-header#

Frame header: a title and a description above the panels, aligned with the panel content.

Slots

Slot	Description
(default)	`wds-frame-title`, `wds-frame-description` or any content.

wds-frame-title#

Frame title: the heading of wds-frame-header.

Attributes

Attribute	Type	Default	Description
level	number	3	Heading level for screen readers (`aria-level`).

Slots

Slot	Description
(default)	Title text.

wds-frame-description#

Frame description: muted text below wds-frame-title.

Slots

Slot	Description
(default)	Description text.

wds-frame-footer#

Frame footer: notes or actions below the panels, aligned with the panel content.

Slots

Slot	Description
(default)	Footer content.

Accessibility#

wds-frame is a presentational container: it adds no landmark or role. Wrap it in a <section> with aria-labelledby when it marks a section of the page.

wds-frame-title is a heading (role="heading") with aria-level from level (default 3). Set level so it fits the page outline.

Headings inside panels are your own markup: use the level that follows the frame title.

Keyboard support#

The frame has no keyboard interaction of its own. Controls inside follow the page tab sequence.

Usage#

Examples#

Default#

Separated panels#

Separated panel

Separated panel

Stacked panels#

Stacked panel

Stacked panel

Dense#

Dense panel

Dense panel

Without outer border#

Inverse#

Billing

Usage

Spacing#

Custom radius#

Auth service

Database

Storage

With footer#

Owner

Fit#

API References#

wds-frame#

Attributes

Slots

CSS parts (::part)

CSS custom properties

wds-frame-panel#

Attributes

Slots

CSS custom properties

wds-frame-header#

Slots

wds-frame-title#

Attributes

Slots

wds-frame-description#

Slots

wds-frame-footer#

Slots

Accessibility#

Screen reader#

Keyboard support#