# @wmcadigital/ui-content-card

Content card component for presenting summarized content blocks with optional actions. The package includes styles and an optional small runtime that adjusts button sizing for narrow containers.

## Install

pnpm add @wmcadigital/ui-content-card

## What this package provides

- SCSS and compiled CSS (`dist/styles/main.css`) implementing the `.ds-content-card` block and its elements.
- A small runtime helper exported as default from `src/index.ts` that makes card buttons full-width when the card is narrower than a threshold.
- Integration with layout and button tokens from the design system (`@wmcadigital/ui-layout-grid`, `@wmcadigital/ui-button`).

## Markup

Example structure:

```html
<article class="ds-content-card">
  <h3 class="ds-content-card__title">Title</h3>
  <p class="ds-content-card__body">Summary text</p>
  <a class="ds-btn ds-content-card__action" href="#">Read more</a>
</article>
```

The CSS integrates with .ds-btn from @wmcadigital/ui-button. When the runtime is used it will toggle the .ds-full-width class on .ds-btn within cards based on the card width.

JavaScript behaviour

Import and run the default export to enable responsive button sizing:

import cardsJs from '@wmcadigital/ui-content-card';

cardsJs();

Behaviour details:

• On initialization and on window resize, the script measures each .ds-content-card and adds .ds-full-width to its .ds-btn child if the card's width is less than 500px.

Accessibility

• Use appropriate heading hierarchy inside cards and provide descriptive link text (avoid "click here").
• Ensure interactive elements inside cards are keyboard accessible. The package's runtime does not change focus behaviour.

Customisation

• Override design tokens and variables used by the SCSS (spacing, colours, button styles) to match your site theme.

Development

• SCSS source: src/styles/main.scss.
• JS entry: src/index.ts (default export adjusts button width responsively).
• Build from the monorepo root:

pnpm -w -r run build

Linting:

pnpm -w -r run lint