Article Content Legacy Demo

Revised styles

The following content demonstrates style updates applied from Article updates | Figma. Note that in most cases, 1rem = 16px.

  • Unordered bullet list.
  • Margin left: 1rem.
  • Margin right: 1rem.
  • Margin top: 0.
  • Margin bottom: 1rem.
  • Margin bottom (list item): 1rem.
  1. Unordered bullet list.
  2. Margin left: 1rem.
  3. Margin right: 1rem.
  4. Margin top: 0.
  5. Margin bottom: 1rem.
  6. Margin bottom (list item): 1rem.
  • List Circle.
  • Use the `listCircle` class.
  • Uses the same styles as the component.
  • Image within list.
  • Margin left: 1rem.
  • Margin right: 1rem.
  • Margin top: 0.
  • Nested image. Note that a nested image cannot easily be made wider than the containing `li`.
  • Margin bottom: 1rem.
  • Margin bottom (list item): 1rem.

This is the updated blockquote style. By default, all quote blocks will adopt this style.

Blockquote with content

This new blockquote style adopts styles from the `CalloutBlock` component. This replaces the previous style that used styles from the `Tip` component.

There are some differences with the design in Figma. Let's review whether to update callout block styles in general, or apply specific customisations to this blockquote.

View the CalloutBlock component on Storybook

A normal link

Add `.styled-link` to create this link

Additional features

The following components are made available to the `ArticleContentLegacy` component.

Points to note note:

  • These features exist due to legacy implementations.
  • If they are not going to be used, they should be removed from this component to minimise technical debt.
  • If they are going to be used, further refactor can be done to reduce the number of utility classes required and therefore minimise the possibility of error and incorrect color combinations.

Additional callout block styles

Callout Block with content

`CalloutBlock` component styles are available generally.

In this case, we use the following classes: `calloutBlock salmon-bleached border-salmon-dark highlight-text-salmon-dark`.

View the CalloutBlock component on Storybook

Tip

Tip block styles are available. Here is an example of `tip lilac-bleached border-lilac-dark`. 

Tip block styles are available. Here is an example of `tip magnetic border-magnetic`. 

Was this article helpful?