Language selection

Text editing effects – GCWeb design system

Use to indicate text edits on a page.

On this page

Design options

  • Default
  • Marked
  • Deleted
  • Strikethrough
  • Inserted
  • Redacted
Appearance

Regular text

HTML code 
<p>Regular text</p>

Correct use

  • Use marked text to highlight a section of text for reference purposes, due to its relevance in another context
    • Highlight text to show matching search terms or to show text in relation to something else
  • Use deleted text to show recently deleted text, but use it sparingly, as it makes a page difficult to read
    • Use to show changes to an official document, such as meeting minutes or a law
    • Use as a temporary effect on a page
  • Use strikethrough to indicate text that is no longer accurate or no longer relevant, but use it sparingly, as it makes a page difficult to read
    • Use to show changes to an official document, such as meeting minutes or a law
    • Use as a temporary effect on a page
    • Use for corrections or updates to text, such as with price changes in which both old and new prices are displayed
  • Use redacted content to indicate parts of the page that are protected or not available for viewing
    • Inline: Use when a few words within a paragraph are redacted
    • Full width: Use when a full line, paragraph, list, or table is redacted (add class full-width)

Incorrect use

  • Do not use marked text in place of bold text
    • This tag is not meant to simply highlight key words, phrases, numbers or amount totals
  • Do not use inserted text
    • It mimics the visual appearance of a link, which causes usability problems
    • Non-links should not look like links
  • Do not use strikethrough in place of redacted content

Complementary components

Additional add-on features and behaviours are available.

Date modified: