danielroe.dev / ripple-framework
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

ripple-framework / docs / content / design-system / 5.components / 1.callout.md
2.2 kB

title: Callout description: A callout is used to draw attention to specific or important content. layout: page label: Core links:

  • text: Figma url: #colour
  • text: Storybook url: #component

Usage#

Callouts are text excerpts used to:

  • draw a user's attention
  • add emphasis to the content
  • provide a user with more information.

It repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.

::DocsExample#

id: core-containers-content--callout#

::

When and how to use#

  • Highlight important information vital to the user.
  • Place a callout in a prominent position on the page.
  • Use with text only.

When and how not to use#

  • Only feature 1 callout per page.
  • Use no more than 2 paragraphs per callout.
  • Don't put the callout at the bottom of the page.

Variants#

To allow for different levels of emphasis, the callout component has two styles:

  • Accent.
  • Neutral.

Accent#

Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles.

::DocsExample#

id: core-containers-content--callout#

::

Neutral#

Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.

::DocsExample#

id: core-containers-content--callout-neutral#

::

Theming#

The accent variant uses the site accent colour to:

  • add visual prominence to the content
  • aid hierarchy in the content area.

::DocsThemeChooser ::DocsExample#

id: core-containers-content--callout#

:: ::

To create your own theme, see theming guidance for designers or theming guidance for developers.

Rationale#

To enhance visual weight and address WCAG2.0 Criterion 1.4.1, we’ve used:

  • a thick lefthand border
  • background colours
  • padding.

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)