Apply paragraph font sizing to blockquotes in raw HTML blocks

[Copilot]

Link to Ticket

Description of Changes Made

Blockquotes in raw HTML blocks now use paragraph font sizing (19px mobile, 21px desktop) instead of inheriting default sizes. The h3 title maintains heading color and italic style while matching content font size.

Implementation:

• Created _raw-html-block.scss component for .grid__raw-html blockquote styles
• Applied size-five mixin to both blockquote and nested h3 elements
• Set h3 to var(--color--heading) with explicit font-style: italic

Example HTML affected:

<div class="grid__raw-html">
    <blockquote class="">
        <h3>Blockquote title here</h3>
        Quote contents here.
    </blockquote>
</div>

How to Test

1. Add a raw HTML block to a page with a blockquote containing an h3
2. Verify font size matches paragraph text (inspect computed styles)
3. Confirm h3 is same size as content, darker color, and italic
4. Test at mobile (<1023px) and desktop (≥1023px) breakpoints

Screenshots

Expand to see more

N/A - CSS-only change, visual testing required

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed.
• Tests and linting passes.

Unit tests

• Added
• Not required

Documentation

• Updated build docs
• Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Not required

Browser testing

• I have tested in the following browsers and environments (edit the list as required)
  • Latest version of Chrome on mac
  • Latest version of Firefox on mac
  • Latest version of Safari on mac
  • Safari on last two versions of iOS
  • Chrome on last two versions of Android
• Not required

Data protection

• Not relevant
• This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

• I have tested the changes in both light and dark mode
• The change is not relevant to dark and light mode

Accessibility

• Automated WCAG 2.1 tests pass
• HTML validation passes
• Manual WCAG 2.1 tests completed
• I have tested in a screen reader
• I have tested in high-contrast mode
• Any animations removed for prefers-reduced-motion
• Not required

Sustainability

• Images are optimised and lazy-loading used where appropriate
• SVGs have been optimised
• Performance and transfer of data considered
• If JavaScript is needed alternatives have been considered
• Not required

Pattern library

• The pattern library component for this template displays correctly, and does not break parent templates
• The styleguide is updated if relevant
• Changes are not relevant the pattern library

Original prompt

Hello, please apply styles to blockquote tags within raw HTML blocks so that on tablet and desktop, the font size of the block quote matches that of a standard paragraph at that screen size.

Importantly, the h3 should remain the same size as the content text, should continue to have a darker text color than the content, and the title and the content should continue to have italic styles by default. Essentially the only code change is the font size adjustment.

Here is the source HTML that gets returned by Wagtail when a user adds a blockquote in a raw HTML block.

Blockquote title here

Quote contents here.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.