Follow

Tempest Building Blocks

Screen_Shot_2021-11-02_at_9.55.22_AM.png

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).
Contact Publisher Support at pubsupport@thearenagroup.net to learn more.
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