1-Column Filterable Content

A flexible Style Guide template with interactive filterable items. When creating a new page, choose the '1-Column Filterable Content [SG]' template from the list.

Top Flexible Column

This template comes with a Top Flexible Column and a Bottom Flexible Column where you can place any Style Guide modules you please! Right now you're looking at a Top Flexible Column that contains the Page Header above plus other modules before the filterable items. Pretty cool, huh?

Filterable Items

About the module

Filterable items are meant to showcase items that can be categorized into multiple sets of categories. It helps visitors filter through items to find exactly what they're looking for.

How it's used

This module is best suited for multi-category items, such as movies, products, and awards. Since this module takes up screen real estate, use this module if it's the main focal point of your page.

Jaws

Thriller, Adventure, Drama Oscar 1975 USA

When a gigantic great white shark begins to menace the small island community of Amity, a police chief, a marine scientist and a grizzled fisherman set out to stop it.

Learn more »
the-hunt-for-red-october.jpg
Featured

The Hunt for Red October

Action, Adventure, Thriller BAFTA Award, Academy Award, Oscar 1990 USA

In November 1984, the Soviet Union's best submarine captain in their newest sub violates orders and heads for the USA. Is he trying to defect or to start a war?

Learn more »

The Conversation

Drama, Mystery, Thriller Academy Award, Golden Globe, Oscar 1974 USA

A paranoid, secretive surveillance expert has a crisis of conscience when he suspects that a couple he is spying on will be murdered.

Learn more »

The Jungle Book

Adventure, Drama, Family 2016 USA

After a threat from the tiger, Sher Khan, forces him to flee the jungle, a man-cub named, Mowgli, embarks on a journey of self discovery with the aid of the panther, Bagheera, and the free spirited bear, Baloo.

Learn more »

Independence Day: Resurgence

Action, Adventure, Science Fiction 2016 USA

Two decades after the first Independence Day invasion, Earth is faced with a new extra-Solar threat. But will mankind's new space defenses be enough?

Learn more »

The Lord of the Rings: The Two Towers

Adventure, Drama, Fantasy Oscar, Academy of Science Fiction Fantasy & Horror Films Award 2002 USA, New Zealand

While Frodo and Sam edge closer to Mordor with the help of the shifty Gollum, the divided fellowship makes a stand against Sauron's new ally, Saruman, and his hordes of Isengard.

Learn more »

How to Use It

Filterable Items

To add a new item, add a Filterable Item module to the Filterable Items section. Each Filterable Item has text fields for each filter dropdown where you can enter that item's filters as a comma-separated list. Be sure to keep Filterable Item modules in the Filterable Items section so filtering works properly.

Filterable Options

Edit the Filterable Options module to change the dropdown headlines, background color, and border styles.

Assigning Filters to a Filterable Item

Each Filterable Item has text fields for the the filter dropdowns where you can enter that item's filters. Separate each filter with a comma and the dropdowns will populate automatically. For best results, avoid using punctuation in each filter (for example, instead of Sci-Fi, write SciFi or Science Fiction). No filters for an item in that dropdown? No problem — simply leave it blank.Example: Thriller, Science Fiction, Drama

Keep In Mind

Adding Filters to Items:

  • Don't use punctuation or symbols in the list of filters. Commas should be the only punctuation you need, since they are used to separate each filter on a Filterable Item.
  • You don't need to use all four dropdowns — if you only need two dropdowns, for instance, only use the first and second dropdown fields.
  • Don't worry about adding an All filter to each Filterable Item, as that is taken care of automatically.

Images:

  • The layout will look best if each logo is the same size. We recommend 338 pixels by 241 pixels.
  • Make sure your images are no wider than 338 pixels wide or high. That will ensure your page loads fast, even on mobile devices using a slow data network.

Bottom Flexible Column

Just like the Top Flexible Column, you can place any Style Guide modules you'd like within this Bottom Flexible Column. Go wild!

Here we have a Section Header, followed by a Testimonial and a Full-Width CTA.

liz_shaw_hubspot_dragon.jpg

"Mark my words: One day HubSpot will host a Jaws movie night."

Liz Shaw

Popcorn Fanatic

Somerville Theatre