Typography
Buttons
Forms
Layout / Grid
Navigation
Headers & Banners
Utility Classes
Videos

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At imperdiet dui accumsan sit amet nulla.

Enim diam vulputate ut pharetra. Sagittis nisl rhoncus Link in Paragraph mattis rhoncus urna neque. Massa vitae tortor condimentum lacinia quis vel eros donec ac.

Large Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At imperdiet dui accumsan sit amet nulla.

Enim diam vulputate ut pharetra. Sagittis nisl rhoncus Link in Paragraph mattis rhoncus urna neque. Massa vitae tortor condimentum lacinia quis vel eros donec ac.

<p class="p--lg"></p>

Taglines

Tagline

<h1 class="tagline">Tagline</h1>

*Can be applied to any heading tag

Tagline Secondary

<h2 class="tagline--secondary">Tagline Secondary</h2>

*Can be applied to any heading tag

Tagline Tertiary

<h2 class="tagline--tertiary">Tagline Tertiary</h2>

*Can be applied to any heading tag

Lists

  • Unordered List
  • Item 1
  • Item 2
    1. Ordered List
    2. Item 1
    3. Item 2
    • Red Bullet List
    • Item 1
    • Item 2

    <ul class="list--red-bullet"> ... </ul>

    • Red Arrow List
    • Item 1
    • Item 2

    <ul class="list--red-arrow"> ... </ul>

    Font Family

    Century Gothic

    The Century Gothic font can be referenced throughout the project using the .font-century-gothic class in the HTML or the var(--font-century-gothic) variable in CSS.

    Utilies

    Class Properties
    font-century-gothic font-family: century-gothic,sans-serif;
    font-bold font-weight: 700;
    font-italic font-style: italic;
    text-center text-align: center;
    text-left text-align: left;

    Buttons

    Colors

    Primary

    Divi Preset: Button Primary

    <button class="s-button">Primary</button>

    Secondary

    Divi Preset: Button Secondary

    <button class="s-button s-button--secondary">Secondary</button>

    Tertiary

    Divi Preset: Button Tertiary

    <button class="s-button s-button--tertiary">Tertiary</button>

    Green

    Divi Preset: Button Green

    Sizes

    Small

    Divi Preset: Button Primary -- Small

    <button class="s-button s-button--sm">Small</button>

    Base

    Divi Preset: Button Primary

    <button class="s-button">Base</button>

    Large

    Divi Preset: Button Primary -- Large

    <button class="s-button s-button--lg">Large</button>

    With Icon

    Small

    Divi Preset: Button Primary -- Icon Left -- Small 

    <button class="s-button s-button--icon-left s-button--sm">Small</button>

    Base

    Divi Preset: Button Primary -- Icon Left

    <button class="s-button s-button--icon-left">Base</button>

    Large

    Divi Preset: Button Primary -- Icon Left -- Large

    <button class="s-button s-button--icon-left s-button--lg">Large</button>

    Variants

    Glass

    Divi Preset: Button Glass

    Forms

    Required Dependencies

    Custom CSS & JS > CF7 Success Handler
    Custom CSS & JS > Form Styles

    Custom Success Message

    To add a custom success message, add hidden element some where on the page with the ID form-success and class hidden .

    <div id="form-success" class="text-center hidden">
      <h2>Thank You</h2>
      <h4>Your message has been received.</h4>
    </div>

    Example Form

    Switch LAS VEGASSwitch TAHOE RENOSwitch GRAND RAPIDSSwitch ATLANTASwitch AUSTIN
    Receive updates from Switch

    [\contact-form-7 id="FORM_ID" title="FORM_TITLE" html_class="s-form grid grid-cols-1 md-grid-cols-2"]

    <div class="s-field">
    <label for="first_name" class="sr-only">First Name</label>[\text* first-name id:first_name placeholder "First Name"]
    </div>

     

     

    <div class="s-field">
    <label for="last_name" class="sr-only">Last Name</label>[\text* last-name id:last_name placeholder "Last Name"]
    </div>

     

     

    <div class="s-field">
    <label for="telephone" class="sr-only">Phone</label>[\text* phone id:telephone placeholder "Phone"]
    </div>

     

     

    <div class="s-field">
    <label for="email_address" class="sr-only">Email address</label>[\email* email id:email_address placeholder "Email
    address"]
    </div>

     

     

    <div class="s-field md-col-span-2">
    <label for="select" class="sr-only">Select One</label>[\select* select id:select "Select One" "Option 1" "Option 2"
    "Option 3"]
    </div>

     

     

    <div class="s-field">
    <label for="checkboxes">Checkboxes</label>[\checkbox* checkboxes id:checkboxes class:s-checkboxes use_label_element
    "Option 1" "Option 2" "Option 3"]
    </div>

     

     

    <div class="s-field">
    <label for="inline-checkboxes">Inline Checkboxes</label>[\checkbox* inline-checkboxes id:inline-checkboxes
    class:s-checkboxes class:s-checkboxes--inline use_label_element "Option 1" "Option 2" "Option 3"]
    </div>

     

     

    <div class="s-field">
    <label for="radio-test">Radio Buttons</label>[radio radio-test id:radio-test class:s-radio-buttons use_label_element
    default:1 "Option 1" "Option 2" "Option 3"]
    </div>

     

     

    <div class="s-field">
    <label for="inline-radio-test">Inline Radio Buttons</label>[radio inline-radio-test id:inline-radio-test
    class:s-radio-buttons class:s-radio-buttons--inline use_label_element default:1 "Option 1" "Option 2" "Option 3"]
    </div>

     

     

    <div class="s-field md-col-span-2">
    <label for="message" class="sr-only">Message</label>[\textarea* message id:message placeholder "Message"]
    </div>

     

     

    <div class="s-field md-col-span-2">
    [\checkbox opt_in id:opt_in class:s-checkboxes default:1 "Receive updates from Switch|true"]
    </div>

     

     

    <div class="hidden">
    [\text form_url id:form_url class:hidden ""]
    </div>

     

     

    <div class="md-col-span-2">
    [\submit "Send"]
    </div>

    Global CSS

    Global styles must be applied to each page with a form here: https://www.switch.com/wp-admin/post.php?post=664&action=edit 

    Form Modifiers

    Green Form

    Use class .s-form--green

    [\contact-form-7 id="FORM_ID" title="FORM_TITLE" html_class="s-form s-form--green grid grid-cols-1 md-grid-cols-2"]

    Force Full-Width Fields

    Use class .s-form--force-w-full to force all fields to be full-width regardless of individual classes

    [\contact-form-7 id="FORM_ID" title="FORM_TITLE" html_class="s-form s-form--force-w-full grid grid-cols-1 md-grid-cols-2"]

    Form Utilities

    Hide Label

    Use class .sr-only to hide label visually but keep accessible to screen readers

    <label class="sr-only">...</label>

    Breakpoints

    Divi defined CSS breakpoints
    sm < 768px
    md 768px +
    lg 981px +

    Display

    Utilities for controlling the display box type of an element.
    Class Properties
    .grid display: grid;
    .flex display: flex;
    .block display: block;
    .inline-block display: inline-block;
    .inline display: inline;

    Usage

    <div class="grid">...</div>

    Responsive

    To control the diplsay property of an element at a specific breakpoint, add a {screen}- prefix to any existing display utility class. For example, use md-grid to apply the grid utility at only medium screen sizes and above. Options are md- & lg-.

    <div class="grid lg-block">...</div>

    Grid Template Columns

    Utilities for specifying the columns in a grid layout.
    Class Properties
    grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
    grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-cols-none grid-template-columns: none;

    Usage

    Use the grid-cols-{n} utilities to create grids with n equally sized columns.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="grid grid-cols-3">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

    Note: the gap property must be manually added at this time.

    Responsive

    To control the columns of a grid at a specific breakpoint, add a {screen}- prefix to any existing grid-template-columns utility. For example, use md-grid-cols-6 to apply the grid-cols-6 utility at only medium screen sizes and above.

    <div class="grid grid-cols-1 md-grid-cols-6">
  <!-- ... -->
</div>

    Grid Column Span

    Utilities for controlling how elements are sized across grid columns.
    Class Properties
    col-span-1 grid-column: span 1 / span 1;
    col-span-2 grid-column: span 2 / span 2;
    col-span-3 grid-column: span 3 / span 3;
    col-span-4 grid-column: span 4 / span 4;
    col-span-5 grid-column: span 5 / span 5;
    col-span-6 grid-column: span 6 / span 6;
    col-span-7 grid-column: span 7 / span 7;
    col-span-8 grid-column: span 8 / span 8;
    col-span-9 grid-column: span 9 / span 9;
    col-span-10 grid-column: span 10 / span 10;
    col-span-11 grid-column: span 11 / span 11;
    col-span-12 grid-column: span 12 / span 12;
    col-span-full grid-column: 1 / -1;

    Usage

    Use the col-span-{n} utilities to make an element span n columns.

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="grid grid-cols-3">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
  <div class="col-span-2 ...">4</div>
  <div class="...">5</div>
  <div class="...">6</div>
  <div class="col-span-2 ...">7</div>
      <div class="col-span-full ...">8</div>    
</div>

    Note: the gap property must be manually added at this time.

    Responsive

    To control the column sizing of an element at a specific breakpoint, add a {screen}- prefix to any existing grid-column utility. For example, use md-col-span-6 to apply the col-span-6 utility at only medium screen sizes and above.

     <div class="col-span-2 md:col-span-6"></div>

    Headers

    Ken Burns Effect

    Divi Library > Modules > Ken Burns Effect Image (image module only)
    Divi Library > Sections > Ken Burns Text Banner (section with text overlay)

    Single Tenant Enterprise Facility

    Utility Classes

    Class Properties Description 
    hidden
    		 display: none; Hides element 
    no-margin
    		 margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;    		 Removes margins from element 
    no-padding
    		 padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;    		 Removes padding from element 
    justify-center
    		 justify-content: center; Items are positioned in the center of the container 
    items-center
    		 align-items: center; Items are positioned at the center of the container

    Videos

    Private Vimeo Videos in Modal

    Modal element set Class: modal--video

    Modal Header Settings:
    Show Header: Yes
    Show Title: No
    Show Close Icon: Yes

    Modal Body Settings
    Set margin to 0 0 0 0

    Use this embed code (just swap out vimeo ID):
    <iframe class="resp-iframe" src="https://player.vimeo.com/video/899938378" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

    Modal Footer Settings
    Show Footer: No