Let’s explore creating a hero panel in Quarto using some raw HTML code and SCSS styling tweaks.
What is a hero panel?
We’ve all seen them, but may not have known what to call them. They’re the image that sits usually at the top of a home page. They’re designed to immediately draw your eyes to purpose and main message of the site. Hero panels, also referred to as “hero sections” or “hero images”, have evolved from the newspaper printing concept of “above the fold”. When you see a newspaper, you’re immediately drawn to what the editors intended for you to see first: a bold headline and image. The hope is that it compels you to pick it up and read on.
In web design, the hero panel is situated “above the fold”, but instead, this format requires our content to be visible without scrolling. We’re going to create a hero panel in a Quarto HTML document. We’ll also use some simple HTML create the initial layout, and then write some SCSS to style our panel and place the text where we want.
If you’re interested in learning more about HTML and CSS, a resource that I used and still often reference is W3 Schools. They have free content consisting of bite-sized tutorials to quickly get your feet wet.