Table of Contents

Product Card

See snippets/product-card.liquid.

Snippet API

Option Values Default Description
product Product None Shopify product object. Required.
quick_view Boolean false Controls if the product card has a quickview trigger
lazy_load Boolean False Lazy loads the main product image
show_swatches Boolean True Controls visibility of swatches
show_reviews Boolean False Controls visibility of reviews

Article Card

See snippets/article-card.liquid.

Tomorrow’s Food Today

10 days ago
It’s been a busy year here at Soylent. Not only have we had some exciting product launches, we’ve also thrown our inaugural “Tomorrow’s Food Today” events. At these events, we bring together food-tech specialists, food scientists, and emerging food-tech startups to talk the future of food, sustainability, and more.
Read

Snippet API

Option Values Default Description
article Article None Shopify article object. Required.
show_date Boolean true Controls visibility of article date
show_tags Boolean true Controls visibility of article tags
show_excerpt Boolean false Controls visibility of article excerpt
img_size String 600x450 Specifies crop of the displayed article image. See URL Filter Size Parameters for more info.

Content Card

Generic card for displaying image / text content and a call to action..

See snippets/content-card.liquid.

Content Card Title
Subtitle goes here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Overlay Card

A card with background image and overlaid text.

See snippets/overlay-card.liquid.

Play with the options and apply a blend mode to the background and make something cool.

Snippet API

Option Values Default Description
background_image Image None Shopify image object.
background_image_vertical_alignment String center Controls vertical alignment of the background image. Accepts any valid CSS background-position value.
background_image_width Integer 800 Controls crop width of the background image.
overlay_bg_brightness "Dark" / "Light" None Enables a dark or light layer over the background image.
content_vertical_alignment "Top" / "Bottom" "Top" Controls vertical alignment of card content
light_text Boolean False Makes content display in a light color.

Banners

Banners are one of the most flexible and re-usable components on the site. They consist of a parent .banner element and any number of child .banner__panel elements. The parent .banner element accepts .banner--large and .banner--small modifier classes to create different sized banners. Note that these modifier classes affect the vertical padding of the child banner panels.

Each banner panel has options for content alignment, text alignment, ctas, color inversion, custom vertical padding and content width, overlays and background images plus positioning at 3 different screen sizes. Most options are optional and have fallbacks. See snippets/banner-panel.liquid for the full list of options.

Banners should generally be used outside of .container elements in order to be full bleed. They have their own child .container elements to ensure that content doesn't stretch beyond the max content width for the site.

Note: Banner panel styling is set via a small style block contained within the snippet. Because we use an ID inside this style block to target the specific panel, you must pass a unique ID string into the snippet. For most use cases, some combination of section ID, block ID, and forloop index will do the trick.

Page Hero

Page heroes function similar to banners but should only be used at the top of a page. They are typically used as an enhancement over the text-only .page-header element when we want to display text over a background image. Although their base styling is similar, they are built separately from banners to allow more flexibility. The snippet API is also slightly different to support different features.

Note: Because of the limitations of liquid code and the fact that the page-hero snippet is built to accept an image object as opposed to an image fie url, it is impossible to pass a theme image asset to the snippet in order to show a fully featured example. The example below shows the page hero without a background image, but one can be easily passed in as as a section setting (section.settings.image) or a reference from another object (product.featured_image).

Introductory text goes here

Page Hero Title

Subtext goes down here
Call to action link goes here

Promo

Promos consist of an image and text laid out vertically on mobile and horizontally on desktop. Listed below are the available options that affect layout / styling.

Snippet API

Option Values Default Description
layout Left / Right Left Positions image on the left / right side.
type 1 / 2 / 3 / 4 / 5 None Different types determine how the two columns of the promo share space. See promo.scss for the list of widths.
content_max_width Integer None Sets the maximum width of the text content on desktop sized screens
frame_ratio String None If set, images will be applied as a background image to a frame element with this aspect ratio. See frames.scss
frame_ratio_small String None If set, images will be applied as a background image to a frame element with this aspect ratio on mobile sized screens. See frames.scss

Promo Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CTA Text

Modals

Built using Bootstrap's Modal, use these to create an overlay to focus the user's attention. Click here to see the docs for more info

Overlays

Overlays are similar to modals but are more generic and have more flexibility. They take over the entire screen but don't use a dialog box to hold content. Content is vertically centered within the viewport, but horizontal alignment is up to you. See the "search" example. They use a data-api that is similar to modals.

NOTE: These are still a work in progress, I'm having trouble with the close button on mobile.

Here's some important stuff

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Events

Name Description
hide.overlay Triggered when the hide method is called even if the overlay is already closed.
hidden.overlay Triggered when the hide animation completes.
show.overlay Triggered when the show method is called even if the overlay is already open.
shown.overlay Triggered when the show animation completes.

Drawer

Drawers are elements that are fixed to the side of the screen and are hidden by default. Opening them will transition the element on screen and apply a backdrop to focus user attention and act as a clickable area that dismisses the drawer.

The example below is included statically to use as reference while styling. Clicking the triggers below will show a live, working demo.

Example Drawer

Drawer contents goes here, inside the body.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Use the .drawer__body--flush modifier class to allow the drawer body contents to extend to the edge.

You can use the drawer with or without a backdrop. If the backdrop is used, scrolling will be killed on the body when the drawer is opened.

The API closely follows the one for Bootstrap's modals. You can create the drawer programatically by calling the Drawer constructor and passing in options or by using data-* attributes to specify the element, trigger and options. The example below uses the data API.

Drawer Header

Drawer content goes here.

I'm content that is using the flush drawer body modifier class.

Options

Name Type Default Description
closeSelector String [data-drawer-close] Selector for the close button contained within the drawer element.
backdrop Boolean true Turns on / off a clickable backdrop.

Events

Name Description
hide.drawer Triggered when the hide method is called even if the drawer is already closed.
hidden.drawer Triggered when the hide animation completes.
show.drawer Triggered when the show method is called even if the drawer is already open.
shown.drawer Triggered when the show animation completes.

Slideup

Slideups are similar to drawers in that they are fixed to the screen but they are positioned at the bottom of the viewport and are generally used for site notices as opposed to site functionality.

The example below is included statically to use as reference while styling. Clicking the trigger below will show a live, working demo.

Slideup Title

Throw some text in here that you want to force the user to see.

The API closely follows the one for Bootstrap's modals. You can create the slideup programatically by calling the Slideup constructor and passing in options or by using data-* attributes to specify the element, trigger and options. The example below uses the data API.

Slideup Title

Throw some text in here that you want to force the user to see.

Options

Name Type Default Description
closeSelector String [data-slideup-close] Selector for the close button contained within the slideup element.

Events

Name Description
hide.slideup Triggered when the hide method is called even if the slideup is already closed.
hidden.slideup Triggered when the hide animation completes
show.slideup Triggered when the show method is called even if the slideup is already open.
shown.slideup Triggered when the show animation completes.

Slideup Alert

Slideup alerts are one time alerts that utilize the slideup class. Use the form below to test how alerts will show up.

Collapse

Bootstrap "collapse" is included, we can use this feature to build single elements with toggle-able visibility and multiple elements with accordion behavior.

The collapsible plug in doesn't require you to use the panel element unless you're building an accordion. The base panel class has been left, and should remain, unstyled.

Single Collapsable Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The above example uses the panel element but you can apply the collapse behavior to any elements.


Test Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion Example

Note: Unfortunately when creating an accordion with Bootstrap, the parent element (see data-parent) must have direct children with class panel. Also, be sure not to put the collapse class directly on the element that you want to hide/show as it has trouble with padding. Create a wrapper div and put your content in there.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The above example uses the panel element with it's associated .panel__* child elements but you can apply the accordion behavior to any elements as long as they are wrapped with .panel.

Expandable List

The expandable list is it's own component and should be wrapped in a .panel element. Each list is made up of a header and body with child items. See styles/components/expandable-list.scss for styling.