Listing

Listings provide a simple image and title display for lists of items. They work well for paginated listings of articles, profiles, search results, or other full-page lists of similar data.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleDefault

Open Full Example

<div class="listing listing--photo-left">
  <div class="listing__row">
    <div class="listing__photo"><img src="/test-image-profile.webp" alt="Test Image" /></div>
    <div class="listing__content">
      <div class="listing__title">Listing title (Photo Left)</div>
      <div class="listing__teaser">Listing teaser</div>
    </div>
  </div>
  <div class="listing__row">
    <div class="listing__photo"><img src="/test-image-profile.webp" alt="Test Image" /></div>
    <div class="listing__content">
      <div class="listing__title">Listing title (Photo Left)</div>
      <div class="listing__teaser">Listing teaser</div>
    </div>
  </div>
</div>
<div class="listing listing--photo-right">
  <div class="listing__row">
    <div class="listing__photo"><img src="/test-image-profile.webp" alt="Test Image" /></div>
    <div class="listing__content">
      <div class="listing__title">Listing title (Photo Right)</div>
      <div class="listing__teaser">Listing teaser</div>
    </div>
  </div>
  <div class="listing__row">
    <div class="listing__photo"><img src="/test-image-profile.webp" alt="Test Image" /></div>
    <div class="listing__content">
      <div class="listing__title">Listing title (Photo Right)</div>
      <div class="listing__teaser">Listing teaser</div>
    </div>
  </div>
</div>

Guidance

When to Use Listings

• Dedicated listing pages: Listings work well for dedicated pages displaying lists of articles or profiles
• Search Results

Usage Guidance

• Use profile on less wide photos: The layout adapts depending on the photo size, so limit the size so the layout looks correct.
• Don’t use for non-grouped data: Listings are designed with grouped data at their core. Don’t use them just to layout content, use “split” grids instead.

Styles

Classname	Effect	Reason to Use
listing--photo-left	Photo is on the left, text on the right (Default)	Use when needed for page’s design
listing--photo-right	Photo is on the right, text on the left	Use when needed for page’s design