HandDrawnUnderline

Examples #

'use client';

import { HandDrawnUnderline } from '@coreux/ui';

export default function UnderWord() {
  return (
    <div role="group" aria-label="Editorial headline" style={{ width: 360, height: 230, padding: 24, background: '#F4F1E9', color: '#0B1221' }}>
      <p style={{ margin: '0 0 14px', fontSize: 12, lineHeight: 1.5 }}>Editorial headline</p>
      <h3 className="font-display" style={{ margin: 0, fontSize: 32, lineHeight: 1.2, fontWeight: 700 }}>
        Ask better{' '}
        <span style={{ position: 'relative', display: 'inline-block', paddingBottom: 12 }}>
          questions.
          <HandDrawnUnderline color="var(--color-core-cobalt)" thickness={4} style={{ position: 'absolute', left: 0, bottom: 0 }} />
        </span>
      </h3>
      <p style={{ margin: '12px 0 0', fontSize: 14, lineHeight: 1.5 }}>Underline one phrase; keep every word readable.</p>
    </div>
  );
}

Usage & restraint #

Underline one word or short phrase in a headline. Wrap that phrase in an inline-block span, position the stroke beneath it, and reserve enough space so the stroke does not cross the letters or the next line. Keep the headline clear without the underline.

• UnderWord retains the cobalt thickness-4 stroke under “questions.” The seed's unbundled Cormorant Garamond font is deliberately replaced with the library's The Seasons display font, matching CoreUX's typography conventions.
• Thick · campaign retains the thickness-8 coral stroke. A campaign headline replaces the seed's isolated line to show an appropriate storytelling use of this reserved accent.
• OnDark retains thickness 5 and ivory on navy, now beneath a readable phrase.

All examples include their 360 × 230 px surface, visible text, client directive, and positioning. They reserve 12 px below the selected phrase (24 px for Thick) instead of relying on the seed's negative bottom offset. Their 24 px outer padding is retained. Copying includes every part of this composition.

Use the SocialCarouselSlide underline prop for an automatically matched phrase inside that template. The standalone motif does not search text, wrap words, or create emphasis semantics. For texture beside the whole headline, consider HalftoneCircle.

Appearance & constraints #

The SVG has a fixed viewBox="0 0 200 12", full container width, and preserveAspectRatio="none". It stretches the same curved path to fit the containing phrase; it does not generate a new hand-drawn path for each width.

thickness sets stroke width in SVG user units and also sets the SVG element's height to thickness * 2.4 CSS pixels. Because the viewBox stretches, this is not an exact final pixel stroke width. Very thick values or a short phrase can distort or clip the line. Use finite positive values and review the rendered result: the component has no numeric validation or automatic spacing correction.

The cobalt default uses var(--color-core-cobalt) from the library stylesheet. Color accepts CSS literals or variables. There is no tone, field mode, or theme switch; the dark example explicitly pairs ivory text and stroke with a navy surface. CoreUX reserves coral and the other storytelling accents for campaigns and data, so Thick is a campaign example rather than a new brand-action color.

The underline's className and style apply to the SVG. Give its parent the phrase's width and relative positioning. Keep the phrase short enough to fit at your target width; an inline-block phrase does not break naturally across multiple lines. At small widths, reduce headline size or choose a shorter phrase before scaling the decoration.

Props #

All props are optional. The installed TypeScript declaration includes React CSSProperties for style; neither className nor style has a runtime default.

Accessibility & layout #

The decorative SVG has role="presentation" and aria-hidden="true". Screen readers read the original text and ignore the stroke. If emphasis changes the sentence's meaning, express it in wording or appropriate text semantics as well. The component does not create a link, focus target, or interaction.

Keep sufficient text contrast against the underlying surface, independently of the stroke. Avoid covering letterforms, underlining every phrase, or making ordinary body text look like a link. The examples use headline placement and leave body text unobstructed.

The SVG width follows its parent, but its phrase wrapper and your typography still determine how the layout adapts. Documentation Fit to canvas scales the complete fixed-size example, including text; Actual size preserves its dimensions inside a scrollable region. Neither preview setting adds responsive behavior to your copied layout.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide