FDIC Design System

Appearance

Page Shell ​

This page is the canonical responsive page-shell and top-level section-alignment contract for the FDIC Design System.

Use it when a page, shell component, or full-bleed section needs to align with the rest of the page at desktop, tablet, and mobile widths.

For global-header ownership, local navigation, utility-slot policy, search handoff, and shell composition decisions, use Global Header And Page Shell Composition.

Contract summary ​

Most top-level page sections should follow this model:

  • the section surface may be full bleed
  • the inner content row aligns to --fdic-layout-shell-max-width
  • desktop, tablet, and mobile gutters come from the shared --fdic-layout-* shell tokens
  • shell components and section patterns should not restate competing breakpoint math

This applies to:

  • fd-page-header
  • fd-page-feedback
  • fd-global-footer
  • documented top-level composition sections
  • CMS page bands such as feature/news, tile-link, utility-link, event, and dual-panel supporting sections

Width responsibilities ​

Use these tokens intentionally:

  • --fdic-layout-shell-max-width
    • default inner width for page shell and top-level section content
  • --fdic-layout-max-width
    • broader composition surfaces that intentionally exceed the shell width
  • --fdic-layout-content-max-width
    • readable content rails, not page-shell alignment
  • --fdic-layout-paragraph-max-width
    • long-form text width inside a broader shell-aligned section

Default rule:

  • if the content is a top-level page section, use --fdic-layout-shell-max-width
  • only use --fdic-layout-max-width when the pattern explicitly documents that it is wider than the shared shell

Responsive ranges ​

The shared alignment ranges are:

  • Desktop: >= 1024px
    • use --fdic-layout-gutter
  • Tablet: > 640px and < 1024px
    • use --fdic-layout-gutter-tablet
  • Mobile: <= 640px
    • use --fdic-layout-gutter-mobile

Components and patterns that participate in page-level alignment should switch gutters at these ranges unless they document a deliberate exception.

Section model ​

The standard section model keeps the full-bleed surface separate from the aligned content rail:

css
.section {
  width: 100%;
}

.section__inner {
  box-sizing: border-box;
  width: min(
    var(--fdic-layout-shell-max-width),
    calc(100% - 2 * var(--fdic-layout-gutter))
  );
  margin-inline: auto;
}

@media (min-width: 640.001px) and (max-width: 1023.999px) {
  .section__inner {
    width: min(
      var(--fdic-layout-shell-max-width),
      calc(100% - 2 * var(--fdic-layout-gutter-tablet))
    );
  }
}

@media (max-width: 640px) {
  .section__inner {
    width: calc(100% - 2 * var(--fdic-layout-gutter-mobile));
  }
}

The section background, border, stripe, or divider may still span full bleed. Only the inner content row needs to align to the shared shell width.

Do not put shell gutters on both the full-bleed section and the inner wrapper. For component chrome that owns its own internal padding, such as page header, page feedback, and footer, set the component's documented shell tokens to the same max width and gutter values instead of wrapping it in an additional padded container.

Viewport-height shell ​

When the page includes shell chrome such as fd-global-header, fd-page-feedback, and fd-global-footer, use a viewport-height flex column at the outer wrapper so short pages still finish at the bottom of the viewport.

html
<div class="fdic-page" data-page-overflow="false">
  <fd-global-header></fd-global-header>

  <main class="fdic-page__main">
    <fd-page-header></fd-page-header>
    <!-- Route content -->
  </main>

  <div class="fdic-page__chrome-end">
    <fd-page-feedback></fd-page-feedback>
    <fd-global-footer></fd-global-footer>
  </div>
</div>
  • Put the document's primary route content in .fdic-page__main.
  • Group bottom-of-page chrome such as fd-page-feedback and fd-global-footer inside .fdic-page__chrome-end.
  • If the page overflows vertically, reserve the shy-header offset on the shell wrapper with data-page-overflow="true" and opt into fd-global-header.shy.
  • If the page does not overflow, leave shy mode off and let the bottom chrome settle at the viewport edge through normal flex layout.

Shell-participating components ​

These components consume the page-shell contract directly:

Override their width or gutter tokens only when adjacent top-level sections are intentionally using the same alternate contract.

Top-level section patterns ​

The documented composition patterns in Composition Patterns are also participants in the page-shell contract when they represent first-class page sections.

That means:

  • .fdic-composition-section__inner aligns to --fdic-layout-shell-max-width
  • tablet/mobile gutter changes follow the same shared shell ranges
  • section patterns should not introduce their own shell-width or shell-gutter breakpoint logic unless the docs call that out as an exception

Exceptions ​

Exceptions are allowed, but they should be explicit.

Document an exception when:

  • a section intentionally exceeds the shared shell width
  • a section intentionally collapses earlier or later than the shared shell range
  • a component uses a narrower readable width by design

Do not rely on theme-local breakpoint compensation to create implicit exceptions.