Lens design system

Details

Details

A flexible area that positions supporting information in close proximity to the page title and summary.

The contents of a detail area will vary depending on the content type.

Event details

The details area is currently only available on the event content type.

Event details include:

  • Start date and time
  • End date and time
  • Event location
  • Price range (Lowest to highest)
  • Call-to-action
<!-- COMPONENT: Details -->
<div class="details bg-violet-25-dark small-padding">
    <div class="row column">
        <div class="flex-wrapper">
            <div class="single-item">
                <ul class="lined-list no-bullet-list half-padding-list">
                    <li><strong>7 Dec 2019, 8:30</strong> to <strong>11 Dec 2019, 17:00</strong> (GMT+1)</li>
                    <li>Chancellor's Building, University of Bath</li>
                    <li>Price from <strong>£225</strong> to <strong>£375</strong> (GBP)</li>
                </ul>
                <div class="details-cta pull-right">
                    <!-- COMPONENT: Ghost button -->
                    <a href="#" class="ghost-button">Lorem ipsum dolor sit</a>
                    <!-- End component: Ghost button -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End component: Details -->