@wmcadigital/ui-inset-text

Inset text component for highlighting notes or additional information.

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-inset-text

Using npm:

npm install @wmcadigital/ui-inset-text

Using yarn:

yarn add @wmcadigital/ui-inset-text

What this package provides

• SCSS source in src/styles/main.scss and compiled CSS at dist/styles/main.css.
• A .ds-inset-text class that provides an inset block with left border, padding, and spacing utilities. It also handles heading and paragraph margin adjustments inside the inset.

This package is styling-only; import the CSS into your project to use the class.

Usage

Basic inset text:

<div class="ds-inset-text">
  <p>This is an important note for users to read.</p>
</div>

With a heading inside:

<div class="ds-inset-text">
  <h3>Note</h3>
  <p>Details about this note.</p>
</div>

Notes:

• The inset uses border-left to visually emphasise the block — the colour follows --color-inset (design token) and can be overridden.
• Paragraph top/bottom margins are adjusted to avoid excess spacing inside the inset.

Accessibility

• Use semantic markup inside the inset (headings, paragraphs) so assistive technologies can interpret content correctly.

Customisation

• Override the inset colour locally with CSS variables:

.my-page .ds-inset-text {
  --color-inset: #ceadd8;
}

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.

# Inset Text

Inset text component for highlighting notes or additional information.

## Markup

```html
<div class="ds-inset-text">Important note</div>
```

# inset-text

Allows users to identify important content on the page as they scan the page.

## Usage

```ts
import { hello } from '@wmcadigital/ui-inset-text';
```