The Guide To Using Componentized Pages

Grid

The grid is a group of components that are displayed together on the page in one section. All of the items in the grid should be the same type of component.

Heading: Appears above the grid

Heading Font

Subheading

Subheading Logo: Use for partner/sponsored pages

Layout: If you are creating a grid of cards (such as articles, classes, and/or products), you can choose Tile Hero for a fancier layout similar to the mindbodygreen homepage. Otherwise, choose Standard.

Background Color

Mobile Horizontal Scroll: On mobile devices, should there be one row that scrolls horizontally, or should the items all appear on the page each below each other?

Navigation Anchor: Allows you to scroll to this section from a nav bar/butotn

CTA Button: You can add a button below the grid

Items: Add items here. They should all be the same component type

Column Count: Control the number of items on each row for different screen sizes.

Person Grid

The heading for the grid

The subheading

Caley Alyssa

Caley Alyssa

mbg Class Instructor & Yoga Teacher

Amy Shah, M.D.

Amy Shah, M.D.

Double Board-Certified MD & Functional Medicine Expert

Ash Wilking

Ash Wilking

RUMBLE BOXING INSTRUCTOR & NIKE TRAINER

Alisa Vitti

Alisa Vitti

Women's Hormone and Functional Nutrition Expert

Biet Simkin

Biet Simkin

mbg Class Instructor & Meditation Teacher

Tile Hero Grid

Product Highlights Grid

Our magnesium+ formula

MADE IN THE USA

B. LACTIS B420

Maintain healthy weight*

B. lactis B420 is a bacteria strain that encourages healthy weight through reduction in abdominal fat mass and waist circumference.*

10 BILLION CFUs | USA

JUJUBE

Calm overactive mind

Jujube is a fruit used in Traditional Chinese Medicine for calming and sedation, and supports healthy cortisol levels.*

225 mg

PHARMAGABA

Enhance sleep quality

PharmaGABA® is an extensively studied neurotransmitter shown in clinical trials to enhance natural sleep quality.*

100 mg

Testimonials Grid

Testimonials

What experts are saying about sleep support+

Any ounce of bloat I felt disappeared.

Melissa Wood

Health & Fitness Coach

If there's one product I'm crazy passionate about, it's a good quality probiotic. From the second I tried mindbodygreen's, any ounce of bloat I felt disappeared. probiotic+ optimizes my digestion, and I just overall feel amazing when I take it. The best part is knowing that I can always trust mindbodygreen with sourcing the best possible ingredients!

Any ounce of bloat I felt disappeared.

Melissa Wood

Health & Fitness Coach

If there's one product I'm crazy passionate about, it's a good quality probiotic. From the second I tried mindbodygreen's, any ounce of bloat I felt disappeared. probiotic+ optimizes my digestion, and I just overall feel amazing when I take it. The best part is knowing that I can always trust mindbodygreen with sourcing the best possible ingredients!

Any ounce of bloat I felt disappeared.

Melissa Wood

Health & Fitness Coach

If there's one product I'm crazy passionate about, it's a good quality probiotic. From the second I tried mindbodygreen's, any ounce of bloat I felt disappeared. probiotic+ optimizes my digestion, and I just overall feel amazing when I take it. The best part is knowing that I can always trust mindbodygreen with sourcing the best possible ingredients!

Articles Grid

Grid of Cards (Row of 4)

Grids With Videos

Grids can also have videos either directly or on a card.

Grid of Cards (Row of 4)

Grid of Accordion Items

A Grid can have Accordion Items in it

How Does An Accordion Item Work In A Grid?

To get started, you are going to need a few things:

  • A computer
  • A login to the CMS
  • Some information you want to put in the accordion
  • Enough time to do it

Is It Difficult To Create A Grid Of Accordion Items?

It really doesn't take much to get a Grid set up with Accordion Items in it. The harder part is mapping out the data that you want to put into it. Some of the things you can put in it are:

  • FAQs
  • Class Outlines
  • Ingredients
  • Recipe Steps
  • Bullets