> For the complete documentation index, see [llms.txt](https://docs.lufavo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lufavo.com/roomfolk/sections/hero.md). # Hero The hero is the first thing someone sees on your home page. It holds a short headline, a line of supporting text, up to two buttons, and a row of small badges — over a background image if you add one. The section works before you have uploaded anything. With no image it draws a placeholder, so the home page never looks broken while you are still setting up. **Where it can go:** any page. It is on the home page by default. *** ## Content | Setting | What it does | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | Kicker | The small line above the heading. Leave it empty to hide it. | | Heading line 1 | The first line of the headline. | | Heading line 2 | The second line. | | Heading line 3 | The third line, drawn in your accent color. Leave it empty for a two-line headline. | | Heading size | Small, Medium or Large. This scales the headline relative to your theme's type settings, so it stays in proportion if you change fonts later. | | Description | A sentence or two under the headline. | The headline is split into three lines on purpose, so you control where it breaks rather than leaving it to the width of the screen. Type your headline across the three fields and it will break in the same place on every device. If you only want one line, put it in line 1 and leave the other two empty. *** ## Image | Setting | What it does | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | Image | The background image. Leave it empty to use a placeholder. | | Mobile image | An optional tighter crop for phones. If empty, the main image is used. | | Use the image’s focal point | On by default. Frames the image using the focal point you set on the file in your Shopify admin. | | Image focal point | Only used when the setting above is off. Moves which part of the image stays in frame, from 0% (top) to 100% (bottom). | | Image fade | Fades the image toward your page color, from 0% to 100%. Raise it if your photograph is busy and the text is hard to read. | **On choosing an image.** The hero crops your image to the section height rather than the other way round, so the section does not change shape when you swap the picture. A wide, uncluttered photograph works best. If the part you care about is drifting out of frame, set a focal point on the file in **Content → Files** and leave "Use the image’s focal point" on. **On readability.** If text is hard to read over your photograph, raise **Image fade** before reaching for anything else. It fades toward your page color, so it works on a light scheme and a dark one without you changing anything. *** ## Buttons There are two, a primary and a secondary. | Setting | What it does | | ----------------------- | ------------------------ | | Button label | The text on the button. | | Link | Where it goes. | | Open links in a new tab | Applies to both buttons. | **A button only appears once it has a link.** A label on its own does nothing, so you will not end up with a button that goes nowhere. *** ## Layout | Setting | What it does | | ------------------- | ----------------------------------------------------------------------------- | | Content position | Whether the text sits left, center or right. | | Alignment | How the text itself is aligned within that area. | | Section height | 360px to 900px. | | Mobile order | Whether the image or the text comes first on narrow screens. | | Text area softening | 20% to 70%. How far your page color carries across the image behind the text. | **Content position and Alignment are separate on purpose.** You can place the text block on the left but center the words inside it, or any other combination. **Text area softening** is the band of page color that sits behind your words so they stay legible. Lower it for more photograph, raise it for more contrast. *** ## Spacing | Setting | What it does | | -------------- | -------------------------------- | | Top spacing | 40px to 160px above the section. | | Bottom spacing | 0px to 120px below it. | *** ## Style | Setting | What it does | | ------------ | ---------------------------------------------- | | Color scheme | Which of your color schemes this section uses. | Color schemes are set up once in **Theme settings → Colors** and reused across every section, so changing a scheme updates everywhere it is used. *** ## Badges Small labelled items in a row beneath the buttons — the sort of thing you would use for "Free delivery" or "30-day returns". Add as many as you like, though three or four is usually where a row still reads at a glance. | Setting | What it does | | ------- | ------------------------------------------------------------------- | | Text | The badge label. | | Icon | Delivery, Returns, Guarantee, Sustainable, Support, Spark, or None. | Choose **None** if you want the text without an icon. *** ## Things worth knowing * **The section never collapses.** With no image, no buttons and no badges it still draws the headline and description over a placeholder. * **Long headlines are safe.** The three lines wrap rather than overflowing, and the section height does not change when you swap images. * **The mobile image is optional.** Add one only if the main photograph loses its subject when cropped narrow. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.lufavo.com/roomfolk/sections/hero.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.