Component demo · Example actions open local destination patterns.
Action Hero — Preparation
Open demo ↗Featured Content
Continue
Getting started takes only a few minutes. Review the details, then choose the option that works best for you.
HTML source & reuse instructions
Load Bootstrap, assets/versa/css/versa.css, and assets/custom/custom.css. Replace the demo destinations with your project URLs.
<section aria-labelledby="prep-title" class="versa-site-app versa-site-app--prep"><div class="versa-site-app-inner"><div class="versa-site-app-intro"><p class="versa-site-app-eyebrow">Featured Content</p><h2 id="prep-title">Continue</h2><p class="versa-site-app-description"><strong>Getting started takes only a few minutes.</strong> Review the details, then choose the option that works best for you.</p></div><div class="versa-site-app-panel"><div class="versa-site-app-choices"><div class="versa-site-app-choice"><h3>Primary option</h3><p>Review the featured path and continue.</p><a class="versa-site-app-button" href="/templates/action-destinations/#member">Continue</a></div><div class="versa-site-app-choice"><h3>Alternate option</h3><p>Explore another path using the same component.</p><a class="versa-site-app-button" href="/templates/action-destinations/#join">Get started</a></div></div><p class="versa-site-app-resume"><a href="/templates/action-destinations/#resume"><span class="versa-site-link-text">View details or continue</span> <span class="versa-site-link-icon" aria-hidden="true">→</span></a></p></div></div></section>