Rich Text

Content: fields for Heading, Rich Text
Layout: option to Center Text
Styles: set colours for Text, Link

Layout issues

Styling issues

Rich Text allows for a link within it to be styled as either a Primary, Secondary or Tertiary Button. The component itself offers no option to set those styles (only a Link colour), which is fine as Button styles should be set globally. The CSS that defines the appearance of these buttons references the following 3 variables, combining them in different ways: primaryButtonColour, primaryButtonTextColour, accentColour. However the text within each button is always being set to Accent Colour which is causing a display issue for the Primary and Tertiary buttons (see below). - GO BUG LOGGED

Accessibility issues

No errors (WAVE plugin)

Potential improvements

Component Heading

HEADING SIZES

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

TEXT SIZES

Extra Large. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Large. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Medium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Regular. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Small. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Extra small. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

ELEMENT STYLES

Text wrapped in a Link

Text styled as a Blockquote

Link styled as a Primary Button

Link styled as a Secondary Button

Link styled as a Tertiary Button

Layout - Center Text