Content Slider

Keep the CSS and JavaScript links from this page. Asset paths are relative to the modules folder.

<div aria-label="Featured stories" aria-roledescription="carousel" data-autoplay="true" data-versa-slider="" data-interval="4000" data-transition="fade" role="region" tabindex="0"><div class="versa-slides"><div class="versa-slide"><div class="versa-content-slide"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-project.svg" width="960"/><div><span class="versa-site-eyebrow">FIELD NOTES / 01</span><h3>Start with a clear idea.</h3><p>Give each story its own image, summary and destination.</p><a class="btn btn-primary" href="/templates/blog/post/">Read the story</a></div></div></div><div class="versa-slide" hidden=""><div class="versa-content-slide"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-content.svg" width="960"/><div><span class="versa-site-eyebrow">FIELD NOTES / 02</span><h3>Build with intention.</h3><p>A repeatable layout keeps a collection coherent.</p><a class="btn btn-primary" href="/templates/blog/post/">Read the story</a></div></div></div><div class="versa-slide" hidden=""><div class="versa-content-slide"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-dashboard.svg" width="960"/><div><span class="versa-site-eyebrow">FIELD NOTES / 03</span><h3>Make room for discovery.</h3><p>Let readers explore at their own pace.</p><a class="btn btn-primary" href="/templates/blog/post/">Read the story</a></div></div></div></div><div class="versa-slider-controls"><button aria-label="Previous slide" class="versa-slider-arrow versa-slider-prev" data-slider-prev="" type="button">‹</button><span class="visually-hidden" data-slider-status="" role="status"></span><button aria-label="Next slide" class="versa-slider-arrow versa-slider-next" data-slider-next="" type="button">›</button><button aria-pressed="true" class="versa-motion-toggle" data-slider-play="" type="button">Pause slideshow</button></div><div class="versa-slider-dots" data-slider-dots=""></div></div>