Details
The Details module — the "Case Details" header of a customer case: a section title beside a grid of labelled facts (location, customer, sector, style, age group, capacity). A value is text, a row of Tags or Badges, or a list of words. Default, Branch (brand background) and panel (grey box) sections. Built from the Tag and Badge atoms.
Examples
Case Details
The header of a customer case as on the Figma "Customer Case" page: title on the left, six facts in a 3-column grid, each under a hairline. "Style" is a row of Tags. On tablet the title moves above the grid; on mobile the grid goes to two columns.
<section class="kompan-details" aria-labelledby="details-case-details">
<div class="kompan-details__container">
<div class="kompan-details__header">
<h2 class="kompan-details__title" id="details-case-details">Case Details</h2>
</div>
<dl class="kompan-details__list">
<div class="kompan-details__item">
<dt class="kompan-details__label">Location</dt>
<dd class="kompan-details__value">Czech Republic</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Customer</dt>
<dd class="kompan-details__value">City of Prague</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Sector</dt>
<dd class="kompan-details__value">Park & Rec</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Style</dt>
<dd class="kompan-details__value kompan-details__chips">
<span class="kompan-tag kompan-tag_sm">Nature Play</span>
<span class="kompan-tag kompan-tag_sm">Custom Design</span>
</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Age group</dt>
<dd class="kompan-details__value">4+</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">User Capacity</dt>
<dd class="kompan-details__value">40+</dd>
</div>
</dl>
</div>
</section>Without hairlines
Figma’s "With border=False": the same facts without the top rule and its padding. Add kompan-details_plain.
<section class="kompan-details kompan-details_plain" aria-labelledby="details-case-details">
<div class="kompan-details__container">
<div class="kompan-details__header">
<h2 class="kompan-details__title" id="details-case-details">Case Details</h2>
</div>
<dl class="kompan-details__list">
<div class="kompan-details__item">
<dt class="kompan-details__label">Location</dt>
<dd class="kompan-details__value">Czech Republic</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Customer</dt>
<dd class="kompan-details__value">City of Prague</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Sector</dt>
<dd class="kompan-details__value">Park & Rec</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Style</dt>
<dd class="kompan-details__value kompan-details__chips">
<span class="kompan-tag kompan-tag_sm">Nature Play</span>
<span class="kompan-tag kompan-tag_sm">Custom Design</span>
</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Age group</dt>
<dd class="kompan-details__value">4+</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">User Capacity</dt>
<dd class="kompan-details__value">40+</dd>
</div>
</dl>
</div>
</section>Secondary text, Badges and word lists
The section title can carry a secondary line (SectionTitle "Title + Secondary text"). A value can also be a row of Badges (Figma Type=Badge) or plain words (Type="tag v2") — a list of items that need no chip.
<section class="kompan-details" aria-labelledby="details-project-facts">
<div class="kompan-details__container">
<div class="kompan-details__header">
<h2 class="kompan-details__title" id="details-project-facts">Project facts</h2>
<p class="kompan-details__subtitle">Opened spring 2024</p>
</div>
<dl class="kompan-details__list">
<div class="kompan-details__item">
<dt class="kompan-details__label">Location</dt>
<dd class="kompan-details__value">Prague, Czech Republic</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Products</dt>
<dd class="kompan-details__value kompan-details__chips">
<span class="kompan-badge kompan-badge_md">Robinia</span>
<span class="kompan-badge kompan-badge_md">Custom</span>
</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Play types</dt>
<dd class="kompan-details__value kompan-details__chips">
<span>Climbing</span>
<span>Sliding</span>
<span>Balancing</span>
</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Surface</dt>
<dd class="kompan-details__value">Rubber, wood chips</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Age group</dt>
<dd class="kompan-details__value">4+</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Opened</dt>
<dd class="kompan-details__value">2024</dd>
</div>
</dl>
</div>
</section>Branch section
Figma Section=Branch: the module on the brand-coloured background, using the branch text and border tokens — so it follows the docs’ colour modes. Add kompan-details_branch.
<section class="kompan-details kompan-details_branch" aria-labelledby="details-case-details">
<div class="kompan-details__container">
<div class="kompan-details__header">
<h2 class="kompan-details__title" id="details-case-details">Case Details</h2>
</div>
<dl class="kompan-details__list">
<div class="kompan-details__item">
<dt class="kompan-details__label">Location</dt>
<dd class="kompan-details__value">Czech Republic</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Customer</dt>
<dd class="kompan-details__value">City of Prague</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Sector</dt>
<dd class="kompan-details__value">Park & Rec</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Style</dt>
<dd class="kompan-details__value kompan-details__chips">
<span class="kompan-tag kompan-tag_sm">Nature Play</span>
<span class="kompan-tag kompan-tag_sm">Custom Design</span>
</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Age group</dt>
<dd class="kompan-details__value">4+</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">User Capacity</dt>
<dd class="kompan-details__value">40+</dd>
</div>
</dl>
</div>
</section>Panel
Figma Section=Alternative: the title above and the facts inside a grey rounded panel, with large display-size values and md labels (Detail.info.large). Tags are md here. Add kompan-details_panel. Figma only draws this at desktop; on smaller screens it follows the same column rules as the default.
<section class="kompan-details kompan-details_panel" aria-labelledby="details-case-details">
<div class="kompan-details__container">
<div class="kompan-details__header">
<h2 class="kompan-details__title" id="details-case-details">Case Details</h2>
</div>
<dl class="kompan-details__list">
<div class="kompan-details__item">
<dt class="kompan-details__label">Location</dt>
<dd class="kompan-details__value">Czech Republic</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Customer</dt>
<dd class="kompan-details__value">City of Prague</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Sector</dt>
<dd class="kompan-details__value">Park & Rec</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Style</dt>
<dd class="kompan-details__value kompan-details__chips">
<span class="kompan-tag kompan-tag_md">Nature Play</span>
<span class="kompan-tag kompan-tag_md">Custom Design</span>
</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">Age group</dt>
<dd class="kompan-details__value">4+</dd>
</div>
<div class="kompan-details__item">
<dt class="kompan-details__label">User Capacity</dt>
<dd class="kompan-details__value">40+</dd>
</div>
</dl>
</div>
</section>Accessibility
- Labelled facts are a description list
Each fact is a label with a value, so the grid is a <dl>: <dt> for "Location", <dd> for "Czech Republic". Screen readers announce them as pairs, which the visual layout only implies. The wrapping <div> per pair is valid HTML and is what the grid lays out.
- The section is named by its title
The <section> takes aria-labelledby pointing at the <h2>, so "Case Details" is a navigable landmark. Keep the heading level in step with the page — h2 under a page h1 is the usual place for this module.
- Chips here are not controls
The Tags and Badges show what the case is, they do not filter anything — so they are <span>s, not <button>s, and are read as plain text. If a value is meant to link to a filtered listing, make each chip an <a> and say where it goes.
- Colour and contrast
Labels use text-tertiary (50% black) at 12px, which is the weakest contrast in the module and should stay at or above AA on bg-primary; values use text-primary. In the Branch section the same roles switch to the branch tokens (white at 50% on the brand colour) — check the mode colours the tokens deliver.
- Do not rely on the hairline
The top rule separates facts visually only; the list structure does that for assistive technology, so the kompan-details_plain variant loses nothing.
Stylesheet
Shipped as @wah-kompan/kompan-ui/components/modules/details.css. Every value is a token reference, so it themes with the rest of the system rather than being restyled. The shipped file also imports Tag, Badge — what this component is built with — so one import is enough.
css
.kompan-details {
--kompan-details-columns: 3;
--kompan-details-title-width: var(--width-xs);
--kompan-details-bg: var(--color-bg-primary);
--kompan-details-fg: var(--color-text-primary);
--kompan-details-fg-subtitle: var(--color-text-secondary);
--kompan-details-fg-label: var(--color-text-tertiary);
--kompan-details-rule: var(--color-border-secondary);
display: grid;
box-sizing: border-box;
margin: 0;
padding-block: var(--spacing-5xl);
background: var(--kompan-details-bg);
color: var(--kompan-details-fg);
font-family: var(--type-font-family-body);
}
.kompan-details__container {
display: flex;
align-items: flex-start;
gap: var(--spacing-3xl);
box-sizing: border-box;
width: 100%;
max-width: var(--container-default-max-width);
margin-inline: auto;
padding-inline: var(--container-padding-lg);
}
/* Title column: fixed width-xs on desktop (SectionTitle, Medium) */
.kompan-details__header {
display: grid;
flex: none;
gap: var(--spacing-xxs);
box-sizing: border-box;
width: var(--kompan-details-title-width);
max-width: 100%;
}
.kompan-details__title {
max-width: var(--width-paragraph-max-width);
margin: 0;
font-family: var(--type-font-family-display);
font-size: var(--type-font-size-display-sm);
font-weight: var(--type-font-weight-semibold);
line-height: var(--type-line-height-display-sm);
}
.kompan-details__subtitle {
max-width: var(--width-paragraph-max-width);
margin: 0;
color: var(--kompan-details-fg-subtitle);
font-size: var(--type-font-size-md);
font-weight: var(--type-font-weight-regular);
line-height: var(--type-line-height-md);
}
/* The facts: 3 per row, rows spacing-5xl apart */
.kompan-details__list {
display: grid;
flex: 1 1 0;
grid-template-columns: repeat(var(--kompan-details-columns), minmax(0, 1fr));
column-gap: var(--spacing-3xl);
row-gap: var(--spacing-5xl);
min-width: 0;
margin: 0;
}
/* Detail.info, With border=True */
.kompan-details__item {
display: grid;
align-content: start;
gap: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: var(--stroke-sm) solid var(--kompan-details-rule);
}
.kompan-details_plain .kompan-details__item {
padding-top: 0;
border-top: 0;
}
.kompan-details__label {
margin: 0;
color: var(--kompan-details-fg-label);
font-size: var(--type-font-size-xs);
font-weight: var(--type-font-weight-regular);
line-height: var(--type-line-height-xs);
}
.kompan-details__value {
min-width: 0;
margin: 0;
overflow-wrap: break-word;
font-size: var(--type-font-size-md);
font-weight: var(--type-font-weight-regular);
line-height: var(--type-line-height-md);
}
/* A value made of Tags, Badges or plain words ("tag v2") */
.kompan-details__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-md);
}
/* Section=Branch: the brand-coloured section */
.kompan-details_branch {
--kompan-details-bg: var(--color-branch-bg-secondary);
--kompan-details-fg: var(--color-branch-text-primary);
--kompan-details-fg-subtitle: var(--color-branch-text-secondary);
--kompan-details-fg-label: var(--color-branch-text-tertiary);
--kompan-details-rule: var(--color-branch-border-secondary);
}
/* Section=Alternative: title above, the facts in a grey panel, large values */
.kompan-details_panel .kompan-details__container {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-xl);
}
.kompan-details_panel .kompan-details__header {
width: auto;
}
.kompan-details_panel .kompan-details__list {
box-sizing: border-box;
column-gap: var(--spacing-5xl);
padding: var(--spacing-5xl) var(--container-padding-lg);
border-radius: var(--radius-card);
background: var(--color-bg-secondary);
}
.kompan-details_panel .kompan-details__item {
gap: var(--spacing-xs);
padding-top: 0;
border-top: 0;
}
.kompan-details_panel .kompan-details__label {
font-size: var(--type-font-size-md);
line-height: var(--type-line-height-md);
}
.kompan-details_panel .kompan-details__value {
font-family: var(--type-font-family-display);
font-size: var(--type-font-size-display-sm);
line-height: var(--type-line-height-display-sm);
}
.kompan-details_panel .kompan-details__chips {
gap: var(--spacing-md);
font-family: var(--type-font-family-body);
font-size: var(--type-font-size-xl);
line-height: var(--type-line-height-xl);
}
/* Breakpoint Tablet: the title stacks above the grid */
@media (max-width: 1024px) {
.kompan-details__container {
flex-direction: column;
align-items: stretch;
}
.kompan-details__header {
width: auto;
}
}
/* Breakpoint Mobile: two facts per row */
@media (max-width: 480px) {
.kompan-details {
--kompan-details-columns: 2;
}
.kompan-details__list {
column-gap: var(--spacing-xl);
}
/* Display-size values do not fit two columns; Figma draws no mobile panel */
.kompan-details_panel {
--kompan-details-columns: 1;
}
}