Banner
A banner is a wide block for the top of a page or a section: an image behind, with a heading, a line of description and buttons on its left. At the top level of a page, its image reaches the edges of the screen while the text stays in line with the page.
Example
<Banner src="https://octri.dev/docs-assets/home/header.webp" width="content" alt="" title="Acme API" description="Everything you need to take payments, from your first request to production.">
<Button href="/guides/quickstart">Get started</Button>
<Button href="/api-reference" variant="outline">API reference</Button>
</Banner>Props
titlestringThe heading.
descriptionstringThe line below the heading.
srcstringThe image behind the text. Without one, the text sits on a plain fill, so a banner still reads as one.
altstringDescribes the image. Leave it empty when the image is only decoration, as it usually is behind text.
hrefstringMakes the whole banner a link, to a page on your site or any URL. External links open in a new tab. Buttons inside it still go to their own links.
widthstringSet it to content to keep the image inside the text column. Left out, a banner with an image at the top level of a page runs out to the edges of the page, and to the edges of the screen on a home page with the sidebar hidden. The Full width switch in the editor sets it for you. A banner inside a card, tab or other component always stays in its column.
childrenButtonDrawn under the description: usually one or two buttons, on one line.
Keep the words short
The text sits over the image, so a long description gets hard to read. A heading of a few words and one sentence work best. Choose an image without much detail on its left, where the text goes.