Skip to content
DocumentationExamples

Component demo · Example actions open local destination patterns.

Action Hero — Right Panel

Open demo ↗

Featured Content

Flexible options for different needs. Choose the path that best fits your goal, then continue when you are ready.

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="right-title" class="versa-site-app versa-site-app--right"><div class="versa-site-app-inner"><div class="versa-site-app-intro"><h2 id="right-title">Featured Content</h2><p class="versa-site-app-description"><strong>Flexible options for different needs.</strong> Choose the path that best fits your goal, then continue when you are ready.</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>