Notice

Displays a notice section with optional title and rich text content. Supports different notice types with appropriate styling and accessibility attributes.

Props

The component accepts all fields from the Notice type directly, plus:

Notice Type Structure

interface Notice {
  _version?: number;
  title?: string;
  copy?: {
    type: string;
    uid: string;
    _version: number;
    attrs: Record<string, any>;
    children: JSONRTENode[];
  };
  type?: ("notice" | "quick-tip" | "warning" | "error") | null;
  $?: {
    title?: CSLPFieldMapping;
    copy?: CSLPFieldMapping;
    type?: CSLPFieldMapping;
  };
}

Notice Variants

The component supports four notice types, each with distinct styling:

• notice (default): Informational notice with blue styling
• quick-tip: Helpful tip with green styling
• warning: Warning message with teal styling
• error: Error message with red styling

Usage

Basic Usage

import Notice from '@/components/molecules/Notice';

<Notice 
  title="Important Information"
  copy={{
    type: "doc",
    uid: "notice-1",
    _version: 1,
    attrs: {},
    children: [
      {
        type: "p",
        children: [{ text: "This is an important notice." }]
      }
    ]
  }}
  type="notice"
/>

With Different Types

// Quick tip
<Notice 
  type="quick-tip"
  title="Pro Tip"
  copy={/* rich text */}
/>

// Warning
<Notice 
  type="warning"
  title="Warning"
  copy={/* rich text */}
/>

// Error
<Notice 
  type="error"
  title="Error"
  copy={/* rich text */}
/>

In Blog Additional Items

{item.notice && (
  <Notice 
    {...item.notice} 
    className="mb-8" 
  />
)}

In Page Components

The Notice component can also be used in page components through the ComponentsRenderer:

// Automatically rendered when notice is included in page.components

Features

• Semantic HTML: Uses <section> with appropriate ARIA attributes
• Accessibility:
  • Uses role="alert" for semantic meaning
  • Sets aria-live to "assertive" for errors/warnings and "polite" for notices/tips
• Design System: Uses design system color tokens for consistent styling
• Type-based Styling: Each notice type has distinct visual styling
• CSLP support: Supports Contentstack Live Preview editing
• Rich Text: Supports rich text content via RichTextRenderer
• Optional Title: Title is optional and uses the Title component

Styling

Each notice type uses specific design tokens:

• Notice: Blue accent colors (--Color-Extended-Blue-Blue-Accent)
• Quick Tip: Green accent colors (--Color-Extended-Green-Green-Accent)
• Warning: Teal accent colors (--Color-Extended-Teal-Teal-Accent)
• Error: Red colors (--Surfaces-Extended-Red-Medium)

All notices feature:

• Left border accent (4px)
• Rounded right corners
• Background color matching the notice type
• Text color matching the notice type

Notes

• Returns null if both title and copy are missing
• Defaults to type: "notice" if no type is specified
• Title is rendered using the Title component with h3 heading
• Copy is rendered using RichTextRenderer with cs-m-body styling
• CSLP attributes are applied to individual fields (title, copy) via $?.title and $?.copy
• When used in ComponentsRenderer, wrapper CSLP is handled automatically by the renderer
• Component accepts Notice fields directly (spread pattern) for compatibility with ComponentsRenderer