View modes

View modes define how content is displayed in its various forms. Convivial ships with a wide range of view modes which give editors easy control how they wish to display content. This is particularly helpful for building out landing pages which need to highlight content and  link off to other parts of the site.

Last updated

View Mode - Icon

Drupal 10 logo

Basic icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales sed arcu non auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Drupal 10 logo

Icon with background colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales sed arcu non auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Drupal 10 logo

Icon with background image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales sed arcu non auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Drupal 10 logo

Icon with link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales sed arcu non auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

View mode - Image

View mode – Search

Node List of example content, rendered with Search view mode in a single column.

Test Article type

Test article

Test article description.
Test event type

Test event

Test event description.
Test resource type

Test resource

Test resource description.

View mode – Image Card

Node List of example content, rendered with Image Card view mode in a four columns.

Article icon
Test Article type

Test article

Test article description.
Event icon
Test event type

Test event

Test event description.
Resource icon
Test resource type

Test resource

Test resource description.

View mode – Basic Card

Node List of example content, rendered with Basic Card view mode in three columns.

Test Article type

Test article

Test article description.
Test event type

Test event

Test event description.
Test resource type

Test resource

Test resource description.

View mode – Summary

Node List of example content, rendered with Summary view mode in a single column.

Test Article type

Test article

Test article description.
Test event type

Test event

Test event description.
Test resource type

Test resource

Test resource description.

View mode – Teaser

Node List of example content, rendered with Teaser view mode in a single column.

Test Article type

Test article

Test article description.
Article icon
Test event type

Test event

Test event description.
Event icon
Test resource type

Test resource

Test resource description.
Resource icon

View mode – Teaser Big

Node List of example content, rendered with Teaser Big view mode in a single column.

Test Article type

Test article

Test article description.
Article icon
Test event type

Test event

Test event description.
Event icon
Test resource type

Test resource

Test resource description.
Resource icon

View mode – Teaser small

Node List of example content, rendered with Teaser Small view mode in a single column.

Test Article type

Test article

Test article description.
Article icon
Test event type

Test event

Test event description.
Event icon
Test resource type

Test resource

Test resource description.
Resource icon
Read more

View Mode - Tile

View Mode - Title

Layout: Alternating

Node List of example content, rendered with Teaser view mode in a single alternating column.

Test Article type

Test article

Test article description.
Article icon
Test event type

Test event

Test event description.
Event icon
Test resource type

Test resource

Test resource description.
Resource icon

Media - basic card

Styleguide

Screenshot of Convivial UI-Kit styleguide.

Media - View Mode - Search

Styleguide

Screenshot of Convivial UI-Kit styleguide.

Media - View Mode - Summary

Styleguide

Screenshot of Convivial UI-Kit styleguide.

Media - View Mode - Title