Panel

Frame artwork with a configured color pairing, consistent proportions, and an optional caption.

<Panel
  bg={props.brand.logo.colorways[0]?.bg}
  fg={props.brand.logo.colorways[0]?.fg}
  ratio="16 / 9"
  caption="An approved color pairing."
  label="Primary">
  <Logo
    tint={
      props.brand.logo.colorways[0]
        ? `var(--color-${props.brand.logo.colorways[0].fg})`
        : undefined
    }
    width="60%"
  />
</Panel>

Usage

Put artwork in the default slot. Omitting ratio lets the content determine the frame height.

<Panel>
  <Logo width="60%" />
</Panel>

The preview uses the first configured logo colorway, a 16 / 9 frame, and a label and caption. Define approved pairs in Logo configuration.

Examples

Let the artwork determine the height

Omit ratio and color props to use a padded frame on the page surface.

<Panel>
  <Logo width="60%" />
</Panel>

Apply an approved color pairing

Pass a configured background and foreground together. ratio holds the frame’s shape; label identifies the specimen and caption adds text below it.

<Panel
  bg={props.brand.logo.colorways[0]?.bg}
  fg={props.brand.logo.colorways[0]?.fg}
  ratio="16 / 9"
  caption="An approved color pairing."
  label="Primary">
  <Logo
    tint={
      props.brand.logo.colorways[0]
        ? `var(--color-${props.brand.logo.colorways[0].fg})`
        : undefined
    }
    width="60%"
  />
</Panel>

Derive text contrast from the background

Supply only bg to use CSS contrast-color() for the foreground. This example requires a configured logo colorway and browser support for contrast-color().

<Panel bg={props.brand.logo.colorways[0]?.bg} ratio="3 / 1">
  <p>Use an approved background for the composition.</p>
</Panel>

Let artwork reach the edges

Set flush to remove the padding. This image fills the panel width and keeps its original aspect ratio. The import assumes a content-root document; substitute your own asset and adjust its relative path.

import photo from "../assets/photography/photo-01.jpg";

<Panel flush>
  <img
    src={photo.src}
    alt="A photograph filling the panel without additional padding"
    width={photo.width}
    height={photo.height}
    style="width: 100%; height: auto;"
  />
</Panel>

Add rich caption content

Use the named caption slot for emphasis or links in a caption. Keep a nonempty caption prop so the caption element is created.

<Panel caption="Primary logo">
  <Logo width="60%" />
  <span slot="caption">
    Primary logo. <strong>Use supplied artwork.</strong>
  </span>
</Panel>

Color and caption behavior

With bg set and fg omitted, the foreground uses CSS contrast-color(). With neither prop, the implementation sets the foreground to black. For a text-bearing panel with fixed colors, supply both configured bg and fg. An unknown color token throws an error during rendering.

Set flush to remove the frame’s padding when artwork should reach its edges.

The default slot contains the artwork. The named caption slot replaces the caption text; it does not create a caption without the caption prop.

API reference