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 highght content and  link off to other parts of the site.

Last updated

View Mode - Icon

Drupal 8 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 8 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 8 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 8 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.

Article

Test article

Test article with general content relevant to all audiences.
Event

Test event

Test event with general content relevant to all audiences.

View mode – Image Card

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

Article icon
Article

Test article

Test article with general content relevant to all audiences.
Event icon
Event

Test event

Test event with general content relevant to all audiences.

View mode – Basic Card

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

Article

Test article

Test article with general content relevant to all audiences.
Event

Test event

Test event with general content relevant to all audiences.

View mode – Summary

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

Article

Test article

Test article with general content relevant to all audiences.
Event

Test event

Test event with general content relevant to all audiences.

View mode – Teaser

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

Article

Test article

Test article with general content relevant to all audiences.
Article icon
Event

Test event

Test event with general content relevant to all audiences.
Event icon

View mode – Teaser Big

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

Article

Test article

Test article with general content relevant to all audiences.
Article icon
Event

Test event

Test event with general content relevant to all audiences.
Event icon

View mode – Teaser small

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

Article

Test article

Test article with general content relevant to all audiences.
Article icon
Event

Test event

Test event with general content relevant to all audiences.
Event 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.

Article

Test article

Test article with general content relevant to all audiences.
Article icon
Event

Test event

Test event with general content relevant to all audiences.
Event 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