Component demo · Example actions open local destination patterns.
Hero Content Guidelines
Open demo ↗Content guidelines
Recommended editorial targets; text is never truncated. Button hard limits are proposed guidance, not enforced limits.
| Field | Target Range | Recommended Max | Hard Max | Visual Target |
|---|---|---|---|---|
| Eyebrow | 5–25 | 30 | None | 1 line |
| Hero Heading | 15–40 | 50 | None | Up to 2 desktop; 3 mobile |
| Hero Description | 75–130 | 160 | None | Up to 3 desktop; 5 mobile |
| Primary Choice Heading | 15–28 | 35 | None | Up to 2 lines |
| Primary Choice Description | 35–70 | 100 | None | 2–3 lines |
| Primary Choice CTA | 10–22 | 25 | 30 proposed | 1 line |
| Non-Primary Choice Heading | 15–28 | 35 | None | Up to 2 lines |
| Non-Primary Choice Description | 35–70 | 100 | None | 2–3 lines |
| Non-Primary Choice CTA | 10–22 | 25 | 30 proposed | 1 line |
| Arrow Link | 15–35 | 40 | None | Prefer 1 line |
HTML source & reuse instructions
Load Bootstrap, assets/versa/css/versa.css, and assets/custom/custom.css. Replace the demo destinations with your project URLs.
<div class="versa-site-app-doc"><h3>Content guidelines</h3><p>Recommended editorial targets; text is never truncated. Button hard limits are proposed guidance, not enforced limits.</p><div aria-label="Content guidelines" class="versa-site-app-table" role="region" tabindex="0"><table><caption>Hero copy lengths (characters including spaces)</caption><thead><tr><th scope="col">Field</th><th scope="col">Target Range</th><th scope="col">Recommended Max</th><th scope="col">Hard Max</th><th scope="col">Visual Target</th></tr></thead><tbody><tr><td>Eyebrow</td><td>5–25</td><td>30</td><td>None</td><td>1 line</td></tr><tr><td>Hero Heading</td><td>15–40</td><td>50</td><td>None</td><td>Up to 2 desktop; 3 mobile</td></tr><tr><td>Hero Description</td><td>75–130</td><td>160</td><td>None</td><td>Up to 3 desktop; 5 mobile</td></tr><tr><td>Primary Choice Heading</td><td>15–28</td><td>35</td><td>None</td><td>Up to 2 lines</td></tr><tr><td>Primary Choice Description</td><td>35–70</td><td>100</td><td>None</td><td>2–3 lines</td></tr><tr><td>Primary Choice CTA</td><td>10–22</td><td>25</td><td>30 proposed</td><td>1 line</td></tr><tr><td>Non-Primary Choice Heading</td><td>15–28</td><td>35</td><td>None</td><td>Up to 2 lines</td></tr><tr><td>Non-Primary Choice Description</td><td>35–70</td><td>100</td><td>None</td><td>2–3 lines</td></tr><tr><td>Non-Primary Choice CTA</td><td>10–22</td><td>25</td><td>30 proposed</td><td>1 line</td></tr><tr><td>Arrow Link</td><td>15–35</td><td>40</td><td>None</td><td>Prefer 1 line</td></tr></tbody></table></div></div>