Typography

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

This is another Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

Heading One

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

Heading Two

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

Heading Three

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

Heading Four

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

Heading Five

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

Heading Six

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam assumenda commodi consequuntur dolorem ea enim id in incidunt ipsum magni maiores minima nihil, obcaecati, officia reiciendis ullam ut, voluptates?

Imitating Headers

Sometimes, usually for SEO reasons, you may not want to use a real header tag on some text that you want to look like a header. These classes make a span or a div look like an <h1>, <h2>, <h3>, or <h4>.

.h1 header look-a-like
.h2 header look-a-like
.h3 header look-a-like
.h4 header look-a-like

Font Size Modifiers

.font-size-huge

.font-size-xxxl

.font-size-xxl

.font-size-xl

.font-size-l

.font-size-m

.font-size-s

.font-size-xs

Font Family and Weight Modifiers

.font-family-base .font-weight-normal

.font-family-base .font-weight-semi-bold

.font-family-base .font-weight-bold

.font-family-serif .font-weight-normal

.font-family-serif .font-weight-bold

.font-family-light .font-weight-normal

.font-family-light .font-weight-bold

Buttons

Links as Buttons

Normal Button Alternate Button Action Button

Inverse Buttons

Opaque Inverse Buttons

Ghost Buttons

Full Width Buttons

Forms

You can group forms into .form-blocks. .form-input default to 100% width, but you can use fixed width inputs like .form-input-100. You can also use the grid system for more complicated form layouts.

Use .form-input-inline to force form elements to their natural width.

Form Field Sizes

Mix forms with buttons and grid

Form Input Groups

Form Input Groups Inline

Labeled Selects

Labeled Selects Inline

Viewports

  • mobile: 0 to 599
  • tablet-portrait: 600 to 899
  • tablet-landscape: 900 to 1339
  • desktop: 1340 to 1799
  • high-res: 1800 to ∞

Visibility Helpers

mobile tablet-portrait tablet-landscape desktop high-res

Class Visible
.hide X
.hide-mobile X
.hide-tablet-portrait X
.hide-tablet-portrait-above X
.hide-tablet-portrait-below X
.hide-tablet-landscape X
.hide-tablet-landscape-above X
.hide-tablet-landscape-below X
.hide-desktop X
.hide-desktop-above X
.hide-desktop-below X
.hide-high-res X

The Grid System

Containers

All grids must be inside of at least one outer container element that has the class .contain on it. Containers help keep our maximum width on the site and provide padding for the outer edges of the screen. Most pages of our website are wrapped inside of a container. To use the grid system, all you need is one outer container somewhere in the HTML structure above your grid in the tag heirarchy.

This is not in a container

This is in a container

<div class="contain"> <p>This is in a container</p> </div>

The Grid

col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-1
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-3
col-tablet-landscape-3
col-tablet-landscape-3
col-tablet-landscape-3
col-tablet-landscape-4
col-tablet-landscape-4
col-tablet-landscape-4
col-tablet-landscape-5
col-tablet-landscape-7
col-tablet-landscape-6
col-tablet-landscape-6
col-tablet-landscape-7
col-tablet-landscape-5
col-tablet-landscape-8
col-tablet-landscape-4
col-tablet-landscape-9
col-tablet-landscape-3
col-tablet-landscape-10
col-tablet-landscape-2
col-tablet-landscape-11
col-tablet-landscape-1

No Gutter Grid

col-tablet-landscape-4
col-tablet-landscape-4
col-tablet-landscape-4
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2
col-tablet-landscape-2

Offsets

col-tablet-landscape-offset-2
col-tablet-landscape-offset-4
col-tablet-landscape-offset-6
col-tablet-landscape-offset-8
col-tablet-landscape-offset-10

Wrapping

col-tablet-landscape-4
col-tablet-landscape-4
Lots more content causing the text to wrap to another line.
col-tablet-landscape-4
col-tablet-landscape-4

Flexible Columns

You can use the col classes without specifying the size of the column to make a stretchy column that will grow to fill out the row it is on

col-tablet-portrait
col-tablet-landscape-1 col-tablet-portrait-6

Flexible and Auto Columns

Mixing flexible and auto columns you can create grids based on the content size of the auto columns.

col-tablet-portrait
col-tablet-portrait-auto

Reverse Order

Reverse tablet-portrait and below

1
2
3

Reverse tablet-portrait and above

1
2
3

Large Gutter Grids

These grids have larger gutters on the tablet-landscape viewport and lager

1
2
3

Grids with a bottom gutter (for wrapping grid items)

1
2
3
1
2
3

Pulls (Floats)

.pull-right-tablet-landscape-above

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias amet aspernatur at esse harum labore laudantium maxime nostrum nulla porro quidem repellendus reprehenderit sapiente sit tenetur totam velit, vitae!

.pull-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias amet aspernatur at esse harum labore laudantium maxime nostrum nulla porro quidem repellendus reprehenderit sapiente sit tenetur totam velit, vitae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias amet aspernatur at esse harum labore laudantium maxime nostrum nulla porro quidem repellendus reprehenderit sapiente sit tenetur totam velit, vitae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias amet aspernatur at esse harum labore laudantium maxime nostrum nulla porro quidem repellendus reprehenderit sapiente sit tenetur totam velit, vitae!

.pull-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias amet aspernatur at esse harum labore laudantium maxime nostrum nulla porro quidem repellendus reprehenderit sapiente sit tenetur totam velit, vitae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias amet aspernatur at esse harum labore laudantium maxime nostrum nulla porro quidem repellendus reprehenderit sapiente sit tenetur totam velit, vitae!

Text Alignment Helpers

.align-center
.align-left
.align-right

Responsive Alignment

.align-center-tablet-landscape-above
.align-right-tablet-portrait-below

Margin Helpers

.no-margin

.no-margin-bottom

.no-margin-top

.no-leading (no margin top or bottom)

Banners

The main components of the banner are the wrapping .banner <div>, the .banner-image (usually an <img> tag), and the .banner-content <div>.

<div class="banner"> <img class="banner-image" src="/media/banners/radiant-skin-bundle-full-width-mobile.jpg" /> <div class="banner-content"> <div class="banner-header">Radiant Skin Bundle</div> <p class="banner-text">Complementary Products to Support Healthy Skin</p> <a class="btn-action banner-button" href="/radiant-skin-bundle">Shop Now</a> </div> </div>

Banners have several classes available to help position elements within the banner.

Position the banner image within the banner's box based on the focal point

Use .banner-subject-{vertical}-{horizontal}. For example: .banner-subject-bottom-right

This would be a good class to use if the focal point of your image is in the bottom right corner of the banner image.

<div class="banner banner-subject-bottom-right"> <img class="banner-image" src="/media/banners/radiant-skin-bundle-full-width-mobile.jpg" /> <div class="banner-content"> <div class="banner-header">Radiant Skin Bundle</div> <p class="banner-text">Complementary Products to Support Healthy Skin</p> <a class="btn-action banner-button" href="/radiant-skin-bundle">Shop Now</a> </div> </div>

Here's the complete list of options:

  • .banner-subject-top-left
  • .banner-subject-top-center
  • .banner-subject-top-right
  • .banner-subject-center-left
  • .banner-subject-center-center
  • .banner-subject-center-right
  • .banner-subject-bottom-left
  • .banner-subject-bottom-center
  • .banner-subject-bottom-right

Align the banner content vertically

.banner-content-{vertical} For example: .banner-content-center

Use this class if you want to vertically center your banner text.

<div class="banner banner-subject-bottom-right banner-content-center"> <img class="banner-image" src="/media/banners/radiant-skin-bundle-full-width-mobile.jpg" /> <div class="banner-content"> <div class="banner-header">Radiant Skin Bundle</div> <p class="banner-text">Complementary Products to Support Healthy Skin</p> <a class="btn-action banner-button" href="/radiant-skin-bundle">Shop Now</a> </div> </div>

Here's the complete list of options:

  • .banner-content-center
  • .banner-content-bottom

* top is not necessary because it's default

Darker Backgrounds

For darker backgrounds use .banner-dark-background. This changes the text color to white so it shows up against the dark background of the banner

<div class="banner banner-dark-background banner-subject-center-center banner-content-bottom"> <img class="banner-image" src="/media/banners/healthy-skin.jpg" alt="Woman Smiling" /> <div class="banner-content"> <p class="banner-text no-margin-bottom">An Ayurvedic Guide to</p> <div class="banner-header">Healthy Skin</div> <a class="btn-alternate banner-button" href="/healthy-skin-tablets-689456">Shop Now</a> </div> </div>

Adding a link to the banner image

<div class="banner"> <a class="banner-image" href="/healthy-skin-tablets-689456"> <img src="/media/banners/healthy-skin.jpg" alt="Woman Smiling" /> </a> <div class="banner-content"> <p class="banner-text no-margin-bottom">An Ayurvedic Guide to</p> <div class="banner-header">Healthy Skin</div> <a class="btn-alternate banner-button" href="/healthy-skin-tablets-689456">Shop Now</a> </div> </div>

Complex Responsive Layouts

For more complicated layouts that change at different breakpoints you can use the HTML 5 <picture> or the <img> srcset attribute to display different images at different breakpoints.

You can also use the grid system to move the banner content around.

<div class="banner banner-subject-bottom-right banner-subject-bottom-right-desktop banner-tall banner-content-top banner-content-center-desktop"> <picture class="banner-image"> <source srcset="/media/banners/dosha-quiz-full-width-mobile.jpg" media="(max-width: 899px)"> <source srcset="/media/banners/dosha-quiz-full-width.jpg" media="(min-width: 900px)"> <img src="/media/banners/dosha-quiz-full-width.jpg" alt="Woman doing yoga on a rock"> </picture> <div class="banner-content"> <div class="grid"> <div class="col-tablet-landscape-6 col-desktop-4"> <div class="banner-header">More than a Dosha Quiz</div> <p class="banner-text">Create your Free Ayurvedic Profile</p> <a href="/radiant-skin-bundle" class="btn-alternate banner-button">Start Now!</a> </div> </div> </div> </div>

Add a link bar

.banner-link-bar

<div class="banner banner-subject-center-center"> <img src="/media/banners/triphala-tablets.jpg" alt="Triphala tablets siting on a birch log with an orchid in the background" class="banner-image" /> <a href="/shop/category/herbal-tablets" class="banner-link-bar">SHOP ALL <strong>TABLETS <i class="far fa-angle-right"></i></strong></a> <div class="banner-content"> <div class="grid"> <div class="col-tablet-portrait-6 col-tablet-landscape-12 col-desktop-6"> <div class="banner-header">Triphala is Awesome.</div> <p class="banner-text">Triphala is good.</p> <a href="/triphala-tablets-11" class="btn-action banner-button">Shop Now</a> </div> </div> </div> </div>

Other banner classes

  • .banner-tall Makes a banner taller =)
  • .banner-x-tall Makes a banner even taller!
  • .banner-short Makes a banner short
  • .banner-full-height Makes a banner the full-height of it's parent
  • .banner-no-height Removes the minimum height of a banner. Use to have the banner size based on it's content.
  • .banner-small Makes the banner's text smaller and gives the banner less padding.

Expression Engine Classes and Objects

Glossary Terms

This is a paragraph with a glossary term in it.

<a class="glossary_term" data-tooltip="{GLOSSARY_TERM}" href="{site_url}/info/ayurvedic-living/learning-ayurveda/glossary-of-ayurvedic-terms/">glossary term</a>

Author Info Without Image

<h5 class="author-name">AUTHOR NAME</h5> <p>BIO</p>

Author Info With Image

<img alt="AUTHOR NAME" class="author-icon" src="{cdn_url}/info/uploads/IMAGE" width="150" height="150" /> <h5 class="author-name">AUTHOR NAME</h5> <p>BIO</p>

References

1 Ayurvedic Medicine: The Principles of Traditional Practice by Sebastion Pole, Chapter 6: Herb Bhumiamalki pg 143-144 and Ayurvedic Healing: A Comprehensive Guide by Dr. David Frawley pg 141-142

2 Ayurvedic Medicine: The Principles of Traditional Practice by Sebastion Pole, Chapter 6: Herb; Neem pg 233-243

<p><sup><a href="#one">1</a></sup> Ayurvedic Medicine: The Principles of Traditional Practice by Sebastion Pole, Chapter 6: Herb Bhumiamalki pg 143-144 and Ayurvedic Healing: A Comprehensive Guide by Dr. David Frawley pg 141-142</p> <p><sup><a href="#two">2</a></sup> Ayurvedic Medicine: The Principles of Traditional Practice by Sebastion Pole, Chapter 6: Herb; Neem pg 233-243</p>

Article Callout

Be creative, yet centered.
Be courageous, with discrimination.
Be compassionate, without attachment.
<div class="article-callout"> CALLOUT TEXT </div>

Inline Article Callout

Every pitta dominant individual needs time for self-care.

After your morning cleansing routines, you head over to your local gym for some swimming. Staying out of the midday heat is vital for protecting your sensitive skin, and the cool water while swimming allows you to get some gentle aerobic activity into your exercise routine. After your workout, you head out to meet your friend for lunch. While you still love salads, you know that having warm cooked greens is better for pitta digestion. You even have some yummy grains like quinoa mixed with sweet potatoes and cooked beets to make sure your meal is balanced and offers a source of healthy protein. Knowing that alcohol will add to the drying and heating quality of pitta agni you finish your meal with a lovely cup of Cumin, Coriander, Fennel Tea (CCF).

<div class="inline-article-callout"> CALLOUT TEXT </div>

Article Callout Textblock

There are many nontraditional routes for building a family, including donor eggs and in vitro fertilization, that some of your individual situations may call for. In those cases, jump in and out along the series of steps as appropriate. Even in the case of adoption, most of these steps still apply since the cleansing and building also serve the spiritual and emotional preparation that is common to all routes.
<div class="article-callout-textblock"> CALLOUT TEXT </div>

Article Quote

“It is wisdom to know others; It is enlightenment to know one's self.”— Lao-Tzu

<p class="article-quote">&ldquo;QUOTE&rdquo;<span class="article-quote-author">— AUTHOR NAME</span></p>

Article Disclaimer

DISCLAIMER
The information provided in this article is not intended as a substitute for medical advice, but only to apprise the reader of basic Ayurvedic lifestyle information. The advice of a qualified health professional is recommended before making changes in diet or exercise routines.

<p class="article-disclaimer"><strong>DISCLAIMER</strong> OTHER TEXT</p>

Photo Caption

Neem and Amalaki

Neem and Amalaki powders
<div class="photo-caption"> CAPTION TEXT </div>

Video Caption

Dr. Premal Patel, Wellness Director at Banyan Botanicals, talks cleansing, Ayurveda, and the benefits of Kitchari Spice Mix
<div class="video-caption">CAPTION TEXT</div>

Alphabetic Lists

  1. A brisk 30 minute walk at least 4–5 times a week
  2. Counseling on kapha pacifying lunch items that she could carry with her in the car
  3. Drink less water so she doesn’t have to wake up to urinate
  4. Kapalabhati Pranayama
  5. Add 1 teaspoon of turmeric to her diet daily
<ol class="alpha-list"> <li>ITEM</li> </ol>

Gray Callout

This is the gray callout. As you can see it makes a gray box.

<div class="gray-callout"> CALLOUT TEXT </div>

Newsletter Sign up

<aside class="newsletter-box"> <div class="newsletter-header">Sign Up For Banyan Emails</div> <p class="newsletter-text"> Sign up to receive emails from Banyan Botanicals with special offers and information on supporting an Ayurvedic lifestyle. </p> <form class="js-subscribe-form"> <input name="list_name" type="hidden" value="Banyan Botanicals Retail" /> <div data-error-container="list_name"></div> <div class="grid bottom-gutter"> <div class="col-tablet-landscape-auto"> <div class="form-input-icon-box"> <input name="email" type="email" id="PAGENAME_email" class="form-input form-input-300 form-input-large" placeholder="Email address" /> <i class="far fa-envelope form-input-icon"></i> </div> <div data-error-container="email"></div> </div> <div class="col-tablet-landscape"> <button type="submit" class="btn-alternate btn-large">Sign Up</button> </div> </div> </form> <script type="text/x-magento-init"> { ".js-subscribe-form": { "banyanSubscribe": { "successMessage": "Thanks for signing up!" } } } </script> </aside>