Content Placeholder
Add nds-content-placeholder to any empty region to mark it as a slot waiting for a real component. The text inside is yours, so the instruction can be written in any language.
Swap with content component
استبدل هذا العنصر بأي عنصر آخر
<div class="nds-content-placeholder">
<span>Swap with content component</span>
<span>استبدل هذا العنصر بأي عنصر آخر</span>
</div>
Built-in Features
CSS-Only
One class, no JavaScript, no initialization. Delete the class and the region is back to normal.
Fills Its Region
Stretches to a parent that has a height, such as a panel body, and falls back to a 120px floor when the parent is content-sized.
Brand and Theme Aware
Border, tint, and text read from the brand color tokens, so the marker retints with a custom theme and stays legible in dark mode.
Your Own Label
The text lives in your markup, so you can name the component that belongs there and write the line in any language or direction.
Usage Guidelines
Best Practices
- Use it in a page template to mark a region the consumer replaces with a real component, so the layout can be reviewed before the content exists
- Use it inside a surface whose content is still being designed, such as a Panel body, a Modal, or a Card, so reviewers see the surface at its real size
- Name the component that belongs there in the label instead of writing "content here". A specific instruction survives the handover to whoever fills the template in
- Do not ship it on a live page. It is a scaffolding marker for work in progress, not a state a user should ever see
- Do not use it when a region is legitimately empty at runtime, for example a list with no results. Use the Empty state instead
- Do not use it while content is being fetched. Use Loading skeletons, which match the shape of the content that is arriving
- Give the parent a height when the placeholder should fill it. In a content-sized parent it settles at its 120px floor
- Keep the label to a line or two. The region is sized by the layout around it, not by the text inside it
- Add a second line in another language when the template is handed to a bilingual team. Each line is centered on its own, so mixed scripts stack cleanly
- Override
--placeholder-FSwhen a placeholder sits in an unusually large or small region and the default label reads out of proportion. Set--placeholder-LHalongside it so the two lines keep their rhythm
Modifier Classes
| Class | Description |
|---|---|
nds-sm | Drops the label to the 2xs type ladder for tight regions, without hand-setting the size knobs |
nds-lg | Lifts the label to the sm type ladder for large regions |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--placeholder-FS | var(--typo-text-xs-FS) | Label font size. Set it on the placeholder, or on an ancestor to retune every placeholder inside |
--placeholder-LH | var(--typo-text-xs-LH) | Label line height. Pair it with any --placeholder-FS override |