Follow

Tempest Building Blocks

Overview

Tempest is a rich platform that supports a set of design components which can be configured in unique ways to create truly distinct designs. Components can most easily be defined as the blocks that make up a page (eg. Hero, Search Box, Feed, etc).

Tempest sites use a set of imagery assets, variables, and configuration options to determine the look and feel of individual components. Components across the Tempest community share the same markup and differentiation is achieved through customizing Typography, Colors and Imagery. Keeping to this structure is the foundation for adherence to a clean design principle. A more detailed description of components is below. To see live examples of our components, please visit our Tempest Component Library page. Login: saymedia | password: tempest

Page Templates

Tempest supports Hub and Detail page templates. Hubs are designed for browsing content. Details are designed for a particular piece of content and follow a dynamic two column layout. A breakdown of hubs and details is below:

Hubs:

  • Homepage: The homepage is the initial main page.
  • Search: The Search page is a distributed and full-text search engine that leverages a variety of parameters to recommend a Detail page.
  • Section: The Section hub aggregates Articles by Section. Typically they include a custom header asset and title but can be custom built during migration to include more functionality.
  • Rich Terms: A Rich Term hub aggregates Details (e.g. articles or recipes) by Term. They can be edited in the CMS to include body copy, images, and embeds to provide a richer experience.
  • Author: An Author hub aggregates Details (e.g. articles or recipes) by author.
  • Custom: Custom Hubs can be built to include a set of Components by URL. 

Details

  • Basic Page: The Basic page is primarily used for static content (about, contact).
  • Article: Articles are created, edited, and published via the Tempest CMS. They are built using a two column layout allowing for peripheral content (e.g. recirculation widgets) and Ads. For a tutorial, visit How To: Create an Article.  
  • Recipe: Recipes are built leveraging schema.org and share a similar composing experience to articles. For a tutorial, visit How To: Create a Recipe.

 

Site Header:

  • Alignment: Centered or Left
  • Size: Medium or Large
  • Coverlines: Circle, Squares, Rectangles. Horizontal or vertical

 

betterNutrition.png

 

PacificStandard.png

 

Hub Components

The following components can be stacked and styled in a variety of ways to create bespoke creative experiences.

 

Header: A Header displays a title, an image, or both depending on how it's configured. Headers are used to provide context to Hubs and individual components. Styling options include:

  • Background: background styling options 
  • Link: A URL
  • Size: XS, S, M, L, XL 

 

Screen_Shot_2017-06-21_at_1.08.53_PM.png

Screen_Shot_2017-06-21_at_1.14.25_PM.png

Screen_Shot_2017-06-21_at_1.22.16_PM.png

 

 

Collection Strip: A Collection Strip is a simple way to display any collection of items in a small space, horizontally. The collection will scroll left to right to display more content. Styling options include:

  • Background: background styling options
  • Image Style: round, square, landscape, portrait, text only
  • Meta Values: label, title, author, timestamp, comment/social 

 

round.png

 

square.png

 

landscapeScroll.png

 

portrait.png

 

text.png

 

Hero: A Hero is a way to display one large item (typically Detail) either manually or programmatically depending on how it’s configured. Styling options include:

  • Background: background styling options
  • Meta Values: label, title, author, dek, timestamp, comment/social 
  • Style: standard (see below), image full width (see below), image full bleed

 

 

imageHero.png

 

 

List Hub: A List Hub is a feed of items best suited for Detail items that include an image, title, and description/dek. Styling options include:

  • Background: background styling options
  • Meta Values: label, title, author, dek, timestamp, comment/social 
  • Image Style: landscape, portrait, text only
  • Add-ons: header, see more footer, row dividers, ads

 

List_Hub.png

 

Image Tile Hub: An Image Tile hub is a feed of items best suited for Detail items that include an image and title. Styling options include:

  • Background: background styling options
  • Meta Values: label, title, author, dek, timestamp, comment/social 
  • Add-ons: header, see more footer, row dividers, ads

ImageTileHub.png

 

Standard Tile Hub: A Standard Tile Hub is a feed of items best suited for Detail Items that include an image and title. Styling options include:

  • Background: background styling options
  • Meta Values: label, title, author, dek, timestamp, comment/social 
  • Add-ons: header, see more footer, row dividers, ads

 

standard_tilehub.png

standardTileHubColor.png

 

Flex Grid Collection: A collection of items arranged in a grid. The grid can be of varying densities based on the configuration.

  • Image Style: Standard or Image
  • Meta Values: label, title, author, dek, timestamp, comment/social 
  • Add-ons: header and row dividers

 

flexGridLowDenstiy.png

 

flexGridStandardHigh.png

 

flexHighImage.png

 

Brand Engagement: The Brand Engagement component uses a flexible set of tools to let readers engage with the site brand in any number of ways. It can be set up with (but does not require) an email address input for newsletter signup, customizable CTAs, and social channel CTAs. Alignment can be Centered or Left. Size can be Small, Medium or Large.

brand_clean.png

 brand_fashion.png

 

 

Search: A Search box. Styling options include:

  • Background: background styling options

 

Component Loaders

All components have the ability to load content in the following ways:

Programmed: A component can be manually programmed by an editor (meaning that the editor specifies the content item or URL, the title, and image in the Tempest CMS Site Programming UI. For details on how to program content How To: Site Programming.

Filtered: A component can automatically display Details by type (eg. by Author, by Section, by Term) and/or by timestamp (e.g. most recent).

Trending: A component can automatically display Details by social stats (Disqus, Facebook, Twitter).

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk