Skip to main content

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.

Content-type layouts​

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.

Layout

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.

Layout

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.

Layout

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.

Layout

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

Layout

Gallery, Thumbnails

Layout

Gallery, Long

Layout

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.

Layout

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.

Layout

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.

Layout

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.

Layout

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.

Layout

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.

Layout

Component layouts​

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

Component layout

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.

Component layout