Detailed Listing

Basic

Example with default options (eyebrow, title, text, meta data, cta)

<!-- basic -->
<div class="ui-list-detailed">
  <div class="ui-list-detailed__body">
    <div class="ui-list-detailed__content">
      <div class="ui-list-detailed__prefix">...</div>
      <div class="ui-list-detailed__title">...</div>
      <p class="ui-paragraph ui-paragraph--lg ui-paragraph--medium">...</p>
      <div class="ui-meta-data">...</div>
    </div>

    <!-- cta content can be anything: button, link with icon, list of links, etc... -->
    <div class="ui-list-detailed__cta">
      <a class="ui-link ui-link--primary" href="#">...
        <i class="ui-icon ui-icon--arrow-right"></i>
      </a>
    </div>

    <!-- more links (these will remain positioned below the content) -->
    <div class="ui-list-detailed__sublinks">
      <ul class="ui-link-group">
        <li class="ui-link-group__link"><a class="ui-link ui-link--inline" href="#">...</a></li>
        <li class="ui-link-group__link"><a class="ui-link ui-link--inline" href="#">...</a></li>
        <li class="ui-link-group__link ui-link-group__link--last"><a class="ui-link ui-link--inline" href="#">...</a></li>
      </ul>
    </div>
  </div>
</div>

With flag, icon and extra links

Example of detailed listing with every options possible (icon, flag, eyebrow, title, text, meta data, main link, extra links

<!-- with flag and icon -->
<!-- add the utility class "ui-color__flag--xxxxx" to define the flag colour -->
<div class="ui-list-detailed ui-color__flag--primary">

  <!-- icon element comes before "ui-list-detailed__body" element -->
  <div class="ui-list-detailed__icon">
    <i class="ui-icon ui-icon--dashboard"></i>
  </div>

  <!-- same as above -->
  <div class="ui-list-detailed__body">
    <div class="ui-list-detailed__content">... </div>
    <div class="ui-list-detailed__cta">...</div>
    <div class="ui-list-detailed__sublinks">...</div>
  </div>
</div>