AUC Drupal Style Sheet

Accessibility Block

COLOR

Usage

Accessibility

For all users, including those with visual disabilities, it’s imperative that they’re able to easily discern content on a page. Color and contrast are the two most critical components to consider when providing accessibility at the highest level. Using Web Content Accessibility Guidelines (WCAG) 2, the full color palette for [BRAND] has been tested to determine which color pairings are most suitable for all users. The chart on the right should be should be used when selecting color combinations that pass all accessibility requirements for both print and digital applications.

SECONDARY COLOR - PASS 

TERTIARY COLOR - PASS

LIGHT FONT - PASS

DARK FONT - PASS 

PRIMARY FONT  - PASS

SECONDARY FONT  - FAIL

TERTIARY FONT  - FAIL

DARK FONT  - PASS

PRIMARY FONT  - PASS

TERTIARY FONT - FAIL

LIGHT FONT - FAIL

DARK FONT - PASS

PRIMARY COLOR - PASS

SECONDARY COLOR -  FAILED

LIGHT COLOR - PASS

DARK COLOR - PASS

PRIMARY COLOR -  FAILED

SECONDARY COLOR - FAILED

TERTIARY COLOR - FAILED

LIGHT COLOR - PASS

DARK COLOR - PASS

 


 

HERO BANNER OPTIONS

 

 

HERO BANNER | GREY CIRCLE LAYOUT


 

 

 

HERO BANNER | PICTURE LAYOUT


 

 

 

 

BLUE SECTION LAYOUT OPTIONS:

x

COPY ONLY BLUE SECTION


  • Use for important call-out
  • Formatting/Styling
    • H2 Secondary (if SEO recommended) or Paragraph Large ALL CAPS
    • or Paragraph Medium

x

PICTURE BANNER

  • **Add custom class: section-behind-hero-mobile to the section
  • Example 1 (Paragraph Medium)
  • Layout: split column 50/50

x

GREY CIRCLE

  • Example 1 (Copy = Paragraph Medium)
  • Example 2 (Copy = Paragraph Large)
  • Layout: split column 66/33 (or 75/25 if that fits better)

       

    HEADING & COPY ONLY BLUE SECTION


    • Formatting/Styling:
      • Title = H1 OR Primary H2 (if SEO recommended) or large style ALL CAPS
      • Subtitle = Secondary H2 or Paragraph Large ALL CAPS
      • Copy = Normal (typically if 2 paragraphs) and Paragraph Medium (typically if 1 paragraph)

    x

    PICTURE BANNER

    • **Add custom class: section-behind-hero-mobile to the blue section
    • Example 1 - with subtitle 
    • Example 2 - 2 paragraphs
    • Example 3 - paragraph medium
    • Layout: 50/50 split column

    x

    GREY CIRCLE

    • Example 1
    • Example 2
    • Layout: Use a 12 column double layout (75/25 or 66/33) whichever best fits the content

    x

    HEADING | COPY + BUTTON(S) BLUE SECTION


    • Formatting/Styling
      • Title = H1 or Primary H2 (if SEO recommended) or Large Style ALL CAPS 
      • Subtitle (if used) = Secondary H2 (if SEO recommended) or Paragraph Large ALL CAPS
      • Copy = Normal (if multiple paragraphs) OR Paragraph Medium (if only 1 paragraph)

     

    PICTURE BANNER

    • **Add custom class: section-behind-hero-mobile to the section
    • Layouts:
      • Use a 12 column double layout (50/50)
      • Use 8/4 template and add the paragraph to the left and the button to right right (7/5 template can be used if needed to fit the whole button)
      • Do not include the title in the template
    • Example 1 - (Title, subtitle, copy, button)
    • Example 2 (2 buttons)

    x

    GREY CIRCLE

    • Layouts: 
      • Use a 12-column double layout (75/25) OR single 12 column section to better fit the buttons, if needed
      • Use a 8/4 template and add the paragraph to the left and the button to the right (7/5 template can be used if needed to fit the whole button)
      • Do not include the title in the template
    • Example 1 (1 paragraph, 1 button)
    • Example 2 (Multiple paragraphs, 1 button, single 12 column)
    • Example 3 (Multiple buttons, single 12 column)

    x

    HEADING + COPY | COPY + BUTTONS(S) BLUE SECTION


    Formatting/Styling:

    • Title = H1 or Primary H2 (if SEO recommended) or Large style ALL CAPS
    • Subtitle (if used) = Secondary H2 or Paragraph Large ALL CAPS
    • Copy = Normal and/or Paragraph Medium

    x

    PICTURE BANNER

    • **Add custom class: section-behind-hero-mobile to the section
    • Use a 12 column double layout (50/50)
    • In 8/4 template, add the paragraphs to the left and button to the right (7/5 template can be used if needed to fit the whole button)
    • Do not include the title in the template
    • Example 1

    x

    GREY CIRCLE

    • Layouts
      • Use a 12 column double layout (75/25) or single 12 column if the content fits better
      • In 8/4 template, add the paragraphs to the left and button to the right (7/5 template can be used if needed to fit the whole button)
      • Do not include the title in the template
    • Example 1

    x

     

    BODY LAYOUT OPTION

    - Depending on the copy, try to either stick with 33/66 or 66/33 (if absolutely needed, 50/50 can be used)

    - Single 12 column section can be used if the content does not fit in split sections


    66/33 LAYOUT


     


    33/66 LAYOUT


     

     

    50/50 LAYOUTS


     



    TITLE = H1/H2 (SEO) OR LARGE HEADING (ADD IN SINGLE 12 COLUMN SECTION)



    SINGLE 12 COLUMN SECTION



    TITLE = H1/H2 (SEO) OR LARGE HEADING


    SUBTITLE = H3 

    Copy = Normal

     

    x

    CTA BANNER 

     

    x

    VERTICAL CTA


    • Section Layout
      • Standard 12 Column, Brand Primary background
    • Setting up the banner:
      • CTA Banner Title goes in the Heading > COPY field (not the heading > HEADING field)
        • Primary H2, or alternate H2 ALL CAPS. You may have to manually change the color of the font to white. 
      • Add CTA Item(s)
        • Title = goes in the SUBHEADING field, not the HEADING field. Paragraph Large style. ALL CAPS. Need to manually change the color to white. 
        • Copy = goes in the SUBHEADING field. Need to manually change the color to white. 
        • Add "vertical-button" to custom class field. 
    • Background color = Primary background color
    • click "Show CTA Buttons Inline" checkbox
    • Example 1 (2 CTAs - bottom of page)
    • See example 2 below:

     

    READY TO LEARN MORE?

    TAKE A
    VIRTUAL TOUR

    Explore our state-of-the art campus facility and the wonderful neighborhood surrounding our beautiful campus. Join us on this self-guided 360 degree virtual tour.

    ADMISSION QUESTIONS?

    Do you have questions about our program, your eligibility, or AUC school of medicine scholarships? Whatever it may be, submit your question, and an admissions colleague will be in touch shortly.

    ADMISSIONS ASSESSMENT

    Get instant feedback on your potential American University of the Caribbean school of medicine candidacy.

     

     

    BLOG/NEWS LAYOUT