ns-content
Introduction#
ns-content is used to display typography and media.
ns-content is used inside other components and has been created to help add consistency to typography styling, and to improve how typography interacts with other components.
Content guidance#
We do not currently have content guidance as this will change depending on the context in which it's being used.
Best practice#
| 💚 Do's | 💔 Dont's |
|---|---|
| Use clean html | Use additional <div> tags to wrap content as this will break the styling |
| Set the spacing attribute to compliment the content it contains | Use expanders outside of ns-accordion |
Usage#
Using ns-image and ns-video#
Both ns-image and ns-video need to be wrapped in a <figure> element
Component placement#
The ns-content component can be used in the following components:
Specification#
| Attribute | Type | Default | Options | Description |
|---|---|---|---|---|
spacing | string | 'normal' | 'compact','cosy','normal','loose' | The space between the elements |
| Slots | Type |
|---|---|
| anonymous | h1 - h6, p, ul, ol, figure, ns-accordion, ns-cta, ns-table, ns-standout |
Specification notes#
Anonymous children#
To display correctly, ns-content relies on clean HTML in the anonymous slot. Using additional components or html elements not listed in the specification will break the styling and will be susceptible to breaking when the component is updated in future releases.
Spacing options#
| Spacing value | Space between elements |
|---|---|
| compact | 0.25em |
| cozy | 0.5em |
| normal | 1em |
| compact | 1.5em |
Feedback#
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.