Wireframes for Brightspot theme layouts

Brightspot's layouts include dozens of layout elements that you can show, hide, and customize. This section provides wireframes for the most common layouts. You can use the wireframes to locate the corresponding elements within data files and templates.

This section describes the layouts for Brightspot’s basic content types.

Article layout

The following wireframe shows the layout for articles as described in /styleguide/core/article/ArticlePage.hbs. Elements in the legend correspond to objects in JSON data files.

Author layout
The following wireframe shows the layout for authors as described in /styleguide/core/author/AuthorPage.hbs. Elements in the legend correspond to objects in JSON data files.

Blog layout
The following wireframe shows the layout for blogs as described in /styleguide/blog/BlogPage.hbs. Elements in the legend correspond to objects in JSON data files.

Blog post layout
The following wireframe shows the layout for blog posts as described in /styleguide/blog/blogpost/BlogPostPage.hbs. Elements in the legend correspond to objects in JSON data files.

Gallery layout
The following wireframe shows the layout for galleries as described in /styleguide/core/gallery/GalleryPage.hbs. Elements in the legend correspond to objects in JSON data files.

Gallery, Slides

Gallery, Thumbnails

Gallery, Long

Page layout
The following wireframe shows the layout for pages as described in /styleguide/core/page/Page.hbs. Elements in the legend correspond to objects in JSON data files.

Press release layout
The following wireframe shows the layout for press releases as described in /styleguide/corporate/press-release/PressRelease.hbs. Elements in the legend correspond to objects in JSON data files.

Search results layout
The following wireframe shows the layout for search results as described in /styleguide/core/search/SearchResultsPage.hbs. Elements in the legend correspond to objects in JSON data files.

Section layout
The following wireframe shows the layout for sections as described in /themes/<theme-name>/styleguide/page/Section.hbs. Elements in the legend correspond to objects in JSON data files.

Tag layout
The following wireframe shows the layout for tags as described in /themes/<theme-name>/styleguide/page/Tag.hbs. Elements in the legend correspond to objects in JSON data files.

Video layout
The following wireframe shows the layout for videos as described in /styleguide/core/video/VideoPage.hbs. Elements in the legend correspond to objects in JSON data files.

This section describes the layouts for low-level components contained in layouts for higher-level components.

Structural layouts
Structural components provide structure to your website. Examples of structural components include header, footer, and navigation.

The following wireframes represent several structural layouts. These templates for these layouts are available at the following locations:

• /styleguide/core/page/PageHeaderTextHat.hbs
• /styleguide/core/banner/Banner.hbs
• /styleguide/core/navigation/Navigation.hbs
• /styleguide/core/page/Page.hbs

Module layouts
Brightspot provides several modules you can incorporate into content types. Examples of these modules include the following:

• Promo
• List
• Quote
• Carousel
• Tabs
• Rich Text
• Container

The following wireframes represent layouts for several modules.