Skip to content
DocumentationExamples

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.

Primary option

Review the featured path and continue.

Continue

Alternate option

Explore another path using the same component.

Get started

View details or continue

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>