Marin Bikes

Module Guide

This Module Style Guide includes examples of each type of module available for the Marin 2020 site.

Hero

There are two kinds of Hero modules:

  • Hero / Standard
    • Used for page introductions.
    • Options for left or center aligned content box.
    • The only required fields are the image and heading. There are options to add a paragraph and button.
    • IMPORTANT - this module is for short headings (1-3 words) and descriptions. If the hero needs a detailed description use the side-by-side option.
    • IMPORTANT - this module should only be used with a decorative image or video. A decorative image/video should not contain important visual information, for example a specific bike or a team member. If the detail of the image or video is important to the page, use the side-by-side hero option.
  • Hero / Side by Side
    • Used for page introductions.
    • The only required fields are the image and heading. There are options to add a paragraph and button.
    • Options for more than one image (image autoplay as a slideshow)
    • IMPORTANT - the image needs to be cut to specific dimensions.

View Hero Modules

Columns

The majority of site content should be built using the column layout options on this page. It's important to break the site into manageable chunks of content that a user can easily scan without having to do too much reading.

There are five kinds of Column modules:

  • Media Card / 2 Column
  • Media Card / 3 Column
  • Media Row / 50-50
  • Media Row / 66-33
  • Media Row / 42-58

See the this module's landing page for usage details.

View Column Modules

General Content

Johannes, please add some content about using general content modules here.

There are two kinds of General Content modules:

  • General Content
  • Image

View General Content Modules

Intros

Johannes, please add some content about using Intro modules here.

There is one kind of Intro module, however it comes in five variations.

View Intro Modules

Misc

There are 3 kinds of Misc modules:

  • Reviews
  • Gallery
  • Bike Grid

View Misc Modules

Static Templates

The static templates which the modular system is built off of can be found here.

A filterable grid of our bikes

Showing: ${ bikeCount } results.

  • Sorry, there are no bikes that match the filters you've selected.

  • ${ bike.bikeName }

    • Description: ${ getBikeDescription(bike, 'Wheel Size') }
    • Price: ${ bike.bikePriceDiscountedFrom } Sale: ${ bike.bikePrice }

    Shop Now Learn More