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
Amy Shah, M.D.
Ash Wilking
Alisa Vitti
Biet Simkin
Caley Alyssa
Amy Shah, M.D.
Ash Wilking
Alisa Vitti
Biet Simkin
Tile Hero Grid
Which Mask Material Is Best For Your Skin? A Dermatologist Explains
Maskne. Need we say more?
Jamie Schneider
Why This Little Area On The Face Always Gets Dry & Red + How To Fix It
There are a few areas of skin that tend to get drier faster than others: knuckles, elbows, corners of the mouth, and—you guessed it—the nose.
Alexandra Engler
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
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!
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)
How Do You Know If You Have Sensitive Skin? Dermatologists Weigh In
Rebecca Dancer
Reviewed by Keira Barr, M.D.
How Do You Know If You Have Sensitive Skin? Dermatologists Weigh In
Rebecca Dancer
Reviewed by Keira Barr, M.D.
Grids With Videos
Grids can also have videos either directly or on a card.
Which Mask Material Is Best For Your Skin? A Dermatologist Explains
Maskne. Need we say more?
Jamie Schneider
Why This Little Area On The Face Always Gets Dry & Red + How To Fix It
There are a few areas of skin that tend to get drier faster than others: knuckles, elbows, corners of the mouth, and—you guessed it—the nose.
Alexandra Engler
Demo - Cloudinary Video
This is a video that was uploaded to Cloudinary. It is Centered with a Medium size.
Demo - Cloudinary Video
This is a video that was uploaded to Cloudinary. It is Centered with a Medium size.
Demo - Cloudinary Video
This is a video that was uploaded to Cloudinary. It is Centered with a Medium size.
Demo - Cloudinary Video
This is a video that was uploaded to Cloudinary. It is Centered with a Medium size.
Grid of Cards (Row of 4)
How Do You Know If You Have Sensitive Skin? Dermatologists Weigh In
Rebecca Dancer
Reviewed by Keira Barr, M.D.
How Do You Know If You Have Sensitive Skin? Dermatologists Weigh In
Rebecca Dancer
Reviewed by Keira Barr, M.D.
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
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