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.
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>