Semantic Definition List
Uses dl/dt/dd elements for accessible term-definition pairs with optional icons
- Full Name
- Mohammed Al-Harbi
- Organization
- Digital Services Department
- Position
- Senior Developer
- Location
- Riyadh
Feature List
Uses class-based markup for icon grids, feature highlights, and content that doesn't need term-definition semantics
WCAG 2.1 compliant with full keyboard navigation and screen reader support.
Built-in XSS protection and content security policy headers.
Lazy loading and staggered initialization for fast page loads.
CSS custom properties for full visual customization without overrides.
Built-in Features
Two-column grid with CSS subgrid for perfect alignment across all term-definition pairs.
Breakpoint variants let you choose when the table view activates: mobile only, tablet and up, or desktop and up.
Optional border separators between items. Works in both default and table view layouts, including responsive variants.
Multi-column responsive grid with configurable breakpoints via --max-col, --mid-col, and --min-col properties.
Control icon size, gap, title font size, and row spacing through custom properties without overriding styles.
Descriptions auto-indent to align with the label text when icons are present in stacked layout.
Usage Guidelines
Best Practices
- Use semantic markup (
<dl>/<dt>/<dd>) for data display like user profiles, service details, or specifications where screen reader semantics matter - Use generic markup (
.nds-item-title/.nds-item-desc) for feature lists, highlights, or content grids where semantic term-definition relationships don't apply - Use default layout for vertical stacking when descriptions vary in length or include multiple lines
- Use table view (
nds-tableView) for compact side-by-side key-value display. Subgrid keeps all columns aligned - Use responsive table view variants to control when the two-column layout activates:
nds-tableView-mdfor tablet and up (stacked on mobile),nds-tableView-lgfor desktop and up, ornds-tableView-smfor mobile only - Use row view (
nds-rowView) for compact inline label/value pairs where each item flows on its own wrappable row. No shared columns across items, so short pairs stay tight and long values wrap naturally beside the label. Good for card meta - Use size modifiers (
nds-md,nds-sm) to scale icon size, title font size, and row gap in step. Default (no class) is large. Individual CSS custom properties (--dl-icon-size,--dl-title-FS,--row-gap) still override size defaults when you need finer control - Use grid layout (
nds-grid) for multi-column responsive grids. Configure breakpoints with--max-col,--mid-col,--min-col - Do not use definition list for navigation or action items. Use a Dropmenu or standard list instead
- Combine styles independently with any layout:
nds-dividedfor border separators,nds-card nds-strokeon items for card appearance - The
nds-dividedstyle adapts automatically to responsive table view variants, showing stacked dividers outside the active breakpoint and table view dividers inside it - Add icons to titles for visual identification. The component auto-indents descriptions to align with the label text in stacked layout
Modifier Classes
| Class | Description |
|---|---|
nds-tableView | Two-column key-value grid layout at all screen sizes |
nds-tableView-sm | Table view on mobile only (max-width: 600px), stacked on larger screens |
nds-tableView-md | Table view from tablet and up (min-width: 601px), stacked on mobile |
nds-tableView-lg | Table view from desktop and up (min-width: 961px), stacked below |
nds-rowView | Each item places dt and dd on a single wrappable row. Looser than table view — no shared columns across items |
nds-divided | Adds border separators between items. Adapts styling for table view and stacked layouts |
nds-md | Medium size: 16px icon, medium title font, medium row gap |
nds-sm | Small size: 14px icon, small title font, small row gap |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--dl-icon-size | 18px (lg) / 16px (md) / 14px (sm) | Width and height of title icons. Floored at 18px — icons never render smaller, even when this value or a size modifier requests less |
--dl-icon-gap | half of icon size | Gap between the icon and label text |
--dl-title-FS | --typo-text-clamp-lg-FS (lg) / -md-FS (md) / -sm-FS (sm) | Font size of term/title text |
--dl-desc-FS | --dl-title-FS | Font size of description/value text. Defaults to match the title so both sides of each row scale together |
--row-gap | --spacing-lg | Vertical spacing between items |
--col-gap | --spacing-xl (table view) / --spacing-sm (row view) | Horizontal spacing between dt and dd in table view and row view |