# Drawer, side panel

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.drawer-side-panel.content"
  source="components/dist/registries/dskit.json#drawer-side-panel"
  schema={1}
/>

<ComponentTabs component={"drawer-side-panel"} activeTab={"content"} />

## Content guidelines

Object preview panels display a summary of an asset's key attributes without requiring full navigation to the detail page. They appear as side panels or overlays and are used to support quick inspection workflows.

### When to use

- When a user hovers over or clicks an item in a list or search result and wants a quick view of its properties.
- To reduce context switching during browsing or review tasks.

### Style

- Panel title is the asset name. Use the exact name - do not rephrase.
- Use short attribute labels (one to two words) followed by their values.
- Group related attributes under a subheading where the panel is long.
- Include a **View full details** link at the bottom to navigate to the full detail page.

### Attribute label examples

<DoDont pairs={[{ do: "Owner", dont: "Assigned owner" }, { do: "Last modified", dont: "Date of last modification" }, { do: "Type", dont: "Object type" }, { do: "Description", dont: "Asset description" }]} />

Related content panels surface assets or resources connected to the currently viewed item. They help users discover relevant datasets, reports, lineage connections, or documentation without leaving their current context.

### When to use

- On asset detail pages to surface downstream or upstream dependencies.
- To show related documentation, reports, or catalog entries.
- Do not use related content panels for primary navigation - they are supplementary.

### Style

- Panel heading describes the relationship type. For example, `Related datasets`, `Used in reports`.
- Each item in the panel shows the asset name as a link, plus one or two metadata attributes (type, owner, or last modified).
- If the panel is empty, show a brief empty state message. For example, `No related datasets found`.

### Do / Don't

<DoDont pairs={[{ do: "Related datasets", dont: "Other items" }, { do: "No related datasets found.", dont: "(empty panel with no message)" }, { do: "Used in 3 reports", dont: "Reports: 3" }]} />