Horizontal Boxes

Submitted by kplatis on Tue, 03/10/2020 - 16:46
Horizontal Boxes
Since
v1.1.0

The Horizontal Boxes view display format is one of the most used in the home website. If you have browsed in the home website, you probably have noticed specific views that load as carousels of boxes. These views are created using the Horizontal Boxes display Format.

Setup
  1. You need to have a Content Type (ex. News)
  2. Create a view mode which re-uses the Preview Card as explained in CERN Components documentation.
  3. Create a view and choose Horizontal Boxes as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the Preview Card pattern
  5. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

"View all news" link at the bottom of the view

To display the "View all news" button like on the screenshot above, all you have to do is to add a link in the footer of the view. More analytically:

  1. In the view settings add a new Footer element of type Text Area
  2. In the text area choose Full HTML format, and add 
    <a href="https://home.cern/news">View all news</a>
  3. Save the view and the link will be displayed as above

Colors

For each one of the cards, the colors are:

  • Title: Inherits the color CARDS/BOXES: title from the theme color settings.
  • Subtitle: Inherits the color CARDS/BOXES: text from the theme color settings.
  • Background Color: Inherits the color CARDS/BOXES: Card background from the theme color settings. The color is only applied if you haven't set an image for the node.

An additional color is set for the navigation dots under the view and inherit the colors ICONS: Slider navigation active/inactive when its active or inactive.