POWERED BY
Modea

Primary Colors
Typography
Components

Primary Colors

These are the primary colors used.

Color Hexcode Sass Variable
#727272 $dove-gray
#595959 $scorpion
#f3f2f2 $concrete
#e4e4e4 $mercury
#519296 $smalt-blue
#99a500 $limeade

Typography

This is the standard typographic scale used.

Example
HTML
CSS

A Big Header

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio explicabo a officia reiciendis consectetur unde cum natus expedita corrupti voluptatem culpa molestiae suscipit voluptatibus enim accusantium eligendi iure similique ratione.

<h1 class="big">A Big Header</h1>
                <h1>Header 1</h1>
                <h2>Header 2</h2>
                <h3>Header 3</h3>
                <h4>Header 4</h4>
                <h5>Header 5</h5>
                <h6>Header 6</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio explicabo a officia reiciendis consectetur unde cum natus expedita corrupti voluptatem culpa molestiae suscipit voluptatibus enim accusantium eligendi iure similique ratione.</p>
.big {
                font-size: 2.8em;
                line-height: 1.14286em;
                }
                h1, h2, h3, h4, h5, h6 {
                font-family: 'Amatic SC';
                font-weight: 400;
                line-height: 50px;
                text-rendering: optimizeLegibility;
                margin-top: 0;
                margin-bottom: 1.6rem;
                color: #619ba8;
                }
                h1 {
                font-size: 2.75rem;
                }
                h2 {
                font-size: 2.3125rem;
                }
                h3 {
                font-size: 1.6875rem;
                }
                h4 {
                font-size: 1.4375rem;
                }
                h5 {
                font-size: 1.125rem;
                }
                h6 {
                font-size: 1rem;
                }
                p {
                font-family: inherit;
                font-weight: 400;
                font-size: 1rem;
                line-height: 20px;
                margin-bottom: 1.25rem;
                text-rendering: optimizeLegibility;
                }

Links

By default links are highlighted with our secondary color and have simple tranisition between states.

Example
HTML
CSS

This is a Header 1 Link

This is a Header 2 Link

This is a Header 3 Link

This is an example of a link within a paragraph.

<h1><a href="#">This is a Header 1 Link</a></h1>
                <h2><a href="#">This is a Header 2 Link</a></h2>
                <h3><a href="#">This is a Header 3 Link</a></h3>
                <p>This is an example of a <a href="#">link</a> within a paragraph.</p>
a {
                color: #75b1be;
                text-decoration: none;
                line-height: inherit;
                }
                a:active, a:link, a:visited {
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;
                }
                a:focus, a:hover {
                color: #396f7a;
                }

Ordered Lists

This is what the default ordered lists look like without any modifying classes.

<ol>

Example
HTML
CSS
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipiscing elit</li>
                <li>Integer molestie lorem at massa</li>
                <li>Facilisis in pretium nisl aliquet</li>
                <li>
                Nulla volutpat aliquam velit
                <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
                </ul>
                </li>
                <li>Faucibus porta lacus fringilla vel</li>
                <li>Aenean sit amet erat nunc</li>
                <li>Eget porttitor lorem</li>
                </ul>
dl, ol, ul {
                font-size: 1rem;
                line-height: 20px;
                margin-bottom: 1.25rem;
                list-style-position: outside;
                font-family: inherit;
                }
                ul {
                margin-left: 1.1rem;
                list-style-type: disc;
                }
                li {
                display: list-item;
                text-align: -webkit-match-parent;
                }

Unstyled Lists

This is what the default lists look like without any modifying classes.

<ul>

Example
HTML
CSS
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipiscing elit</li>
                <li>Integer molestie lorem at massa</li>
                <li>Facilisis in pretium nisl aliquet</li>
                <li>
                Nulla volutpat aliquam velit
                <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
                </ul>
                </li>
                <li>Faucibus porta lacus fringilla vel</li>
                <li>Aenean sit amet erat nunc</li>
                <li>Eget porttitor lorem</li>
                </ul>
dl, ol, ul {
                font-size: 1rem;
                line-height: 20px;
                margin-bottom: 1.25rem;
                list-style-position: outside;
                font-family: inherit;
                }
                ul {
                margin-left: 1.1rem;
                list-style-type: disc;
                }
                li {
                display: list-item;
                text-align: -webkit-match-parent;
                }

Components

These are the primary components used.

Modal Box

The reveal modal box.

Example
HTML
CSS

Reveal the Modal Box

Modal Window

Knowledge is power. Knowledge that inspires as it informs is Aveda. So if you’re looking to expand your creativity and build a thriving career, look no further than our flagship Aveda institute

Call to Action
×

Mobile Action Rows

Used for displaying a row of content and a call-to-action.

Example
HTML
CSS

Media Gallery

The media gallery display.

Example
HTML
CSS

This is a caption!

Form Fields

This is what the form fields look like.

Example
HTML
CSS

I am a button

<form class="info-form">
                <div class="row">
                <div class="small-12 medium-6 large-12 columns">
                <div class="row fname-block">
                <div class="small-4 medium-3 columns">
                <label class="fname-label left inline" for="first_name">Text Field<span class="required">*</span></label>
                </div>
                <div class="small-8 medium-9 columns">
                <input class="fname-input" required="required" name="first_name" type="text" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                </div>
                </div>
                </div>
                </div>

                <div class="row form-legend-block">
                <div class="small-12 column">
                <p class="legend-text">*Required field</p>
                </div>
                </div>
                <div class="row radio-block">
                <div class="small-12 medium-6 columns">
                <input class="consumer-radio" checked="checked" name="lead_type" type="radio" value="consumer"><label class="consumer-label" for="lead_type">Radio Button</label>
                </div>
                </div>

                <div class="row">
                <div class="small-1 columns">
                <input class="optin-input" name="consumer_connect_provider" type="checkbox" value="1">
                </div>
                <div class="small-11 columns">
                <label class="optin-label" for="provider_optin">Checkbox label</label>
                </div>
                </div>

                <div class="row submit-block">
                <div class="small-12 column">
                <button type="submit" class="submit-input">Submit</button>
                </div>
                </div>
                </form>
.info-form .consumer-label, .info-form .email-label, .info-form .fname-label, .info-form .lname-label, .info-form .optin-label, .info-form .phone-label, .info-form .physician-label, .info-form .practice-label, .info-form .zcode-label {
                color: #5e4d42;
                font-size: 14px;
                cursor: text;
                }
                input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
                -webkit-appearance: none;
                -webkit-border-radius: 0;
                background-color: transparent;
                font-family: inherit;
                border: 1px solid #ccc;
                -webkit-box-shadow: 0;
                box-shadow: 0;
                color: rgba(0,0,0,.75);
                display: block;
                font-size: .875rem;
                margin: 0 0 1rem;
                padding: .5rem;
                height: 2.3125rem;
                width: 100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                -webkit-transition: all .15s linear;
                transition: all .15s linear;
                }
                input[type=checkbox], input[type=file], input[type=radio], select {
                margin: 0 0 1rem;
                }
                .info-form .email-input, .info-form .fname-input, .info-form .lname-input, .info-form .phone-input, .info-form .practice-input, .info-form .zcode-input {
                border-top: 0 none;
                border-left: 0 none;
                border-right: 0 none;
                border-color: #5e4d42;
                }
                .info-form .required {
                color: #ef4638;
                }
                .info-form .submit-input {
                border: 0;
                margin-top: 10px;
                padding: 5px 34px;
                background: #5e4d42;
                color: #fff;
                font-size: 23px;
                font-weight: 400;
                }
                .info-form .submit-input:hover {
                background: #766052;
                }

© 2024 Aveda Institute.|All rights reserved.


LEGAL DISCLAIMER: * The Aveda Institutes listed on this site are independently owned and operated by parties unaffiliated with Aveda Corporation. The information provided on this site is for convenience only, so please check each Institute's website for the most current and accurate information. Aveda Corporation is not responsible for the content contained on any Institute's website.