Julie Muzina

Blocked until merge of CTA block component (#5196 )

@lyubomir-popov Addressing your feedback: - [x] `.is-shallow`: this was unnecessary and not actually doing anything - think I stole it from `p-strip`. It's been removed - [x] Image aspect ratio...

@lyubomir-popov Can you please re-org the Hero Figma design in a similar way to the split list? In SU today we were having a hard time differentiating the different variants...

Per SU today, this PR is being split to only tackle the 50/50 variants & add macro support.

Will adjust the top padding on the quote citation tomorrow per [comment](https://www.figma.com/design/Hll6ZRvHyTTGBZZSoRd8ei?node-id=958-1342&m=dev#858892667) from @lyubomir-popov

Blocked pending merge of #5196 to add in the CTA block, everything else is ready

This is on hold until completion of Hero HOC - we're already working on two HOCs, three is pushing it :) Leaving a placeholder quote wrapper macro here as a...

> There were some changes to this pattern according to Lyubo, not fully speced out yet. So need to put this one on hold. > > @jmuzina Now that we...

The example code snippets ([support syntax highlighting for HTML, JS, CSS](https://staging.vanillaframework.io/docs/patterns/navigation#reduced)), because they use [Prism](https://prismjs.com/) to highlight their source ([here's where we call it](https://github.com/canonical/vanilla-framework/blob/510f79dcac1b426f145f1324c214dc2f9f03993e/templates/static/js/example.js#L161-L163)). We could do this for `pre...

Adding to my initial exploration: [Prism.highlightAllUnder](https://prismjs.com/docs/Prism.html#.highlightAllUnder), which is the function we call to highlight syntax, relies on the `pre` element having a class `language-`, where `language_identifier` is some language in...