Content Style Guide

Our brand platform attributes and pillars are the foundation of our being and the reason for our existence. Together, the who, what and why tell the story of Valencia College. But it’s not just our story. As part of Valencia College, it’s your story as well.

Below, you'll see how we use various Style Guide elements to visually identify who we are and what we do.


Content Usage Examples


Page Title

Intro Text

Section Title

Sub-Section Title

Valencia Body Text
OU Editor Styles

Content Usage Examples


Landing Page Section Example

This paragraph uses class "intro-text". "intro-text" paragraph style can ONLY be used on the first paragraph or two. Use of the "intro-text" style should be cleared by Marketing and/or Web Services. Maecenas in iaculis felis, vitae placerat enim. Duis vehicula, nunc at porta sollicitudin, arcu tortor venenatis ex, in venenatis libero nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.


Location

  • 407-299-5000
  • 850 W. Morse Blvd.
    Winter Park, FL 32789


 

Content Usage Examples


Full Width Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.


Content Usage Examples


Two Column (50 - 50)

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.


 
 

Content Row Examples


Copy With Right Column List Group Links

Section Title

Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Ipsum consequat nisl vel pretium. Quis lectus nulla at volutpat diam. Elit ullamcorper dignissim cras tincidunt lobortis. Amet dictum sit amet justo donec enim diam. Senectus et netus et malesuada fames. Commodo viverra maecenas accumsan lacus vel. Tellus in hac habitasse platea. Lectus proin nibh nisl condimentum. Eu non diam phasellus vestibulum. Vitae tortor condimentum lacinia quis. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Non odio euismod lacinia at quis risus sed. Placerat vestibulum lectus mauris ultrices eros in cursus. Quam elementum pulvinar etiam non quam. Malesuada nunc vel risus commodo viverra. Sed risus pretium quam vulputate. Posuere urna nec tincidunt praesent semper. Nec dui nunc mattis enim ut tellus.

Placeholder 3:2 Image


Callout Box

Make your content stand out.

A Callout Box is a graphical design element to call attention to small but important information. 

  • Gray background helps your content stand out from surrounding text. 
  • Heading title should be brief but descriptive. 
  • Body copy should be concise with a clear action.
  • Button is used if an action is required. The button title should be short and describe the next step.
  • Alignment of content should be flush at left side.

Use Case

Use a Callout Box when you need to draw attention to small but important content. A good use of a callout box is when you need to add a message to repeat on multiple pages. 

Header

This is the left-aligned content of the Callout Box. 


Callout Box - Grey Background

This example includes an image

Header

Body Text 1


Callout Box - Grey Background

This example doesn't include an image

Header

Body Text 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est.


Event Callout Box

Community Resilience Series: Building on the Strengths of ALL Young People

Community Resilience Series: Building on the Strengths of ALL Young People

 

This FREE workshop will introduce the essentials of cultivating strength-based, trauma-sensitive, resilience-building interactions with young people.
Dates: 12/08/2020 06:00 PM

 

Media 100 Callout Box

PJI Journal
PJI Journal
The JOURNAL is a reflective tool providing scholarship for peace and justice practitioners throughout the globe.

 

Full Width, Grey Background, Container-Width Content

Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Ipsum consequat nisl vel pretium. Quis lectus nulla at volutpat diam. Elit ullamcorper dignissim cras tincidunt lobortis. Amet dictum sit amet justo donec enim diam. Senectus et netus et malesuada fames. Commodo viverra maecenas accumsan lacus vel. Tellus in hac habitasse platea. Lectus proin nibh nisl condimentum. Eu non diam phasellus vestibulum. Vitae tortor condimentum lacinia quis. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Non odio euismod lacinia at quis risus sed. Placerat vestibulum lectus mauris ultrices eros in cursus. Quam elementum pulvinar etiam non quam. Malesuada nunc vel risus commodo viverra. Sed risus pretium quam vulputate. Posuere urna nec tincidunt praesent semper. Nec dui nunc mattis enim ut tellus.

Simple Localist/Wordpress Feed

Feeds can be inserted on their own row or as part of a split, like so.

You may wish to add a header describing what the feed is ("Upcoming Events", etc.).

Feeds will not appear when "Previewing" the page in the CMS; you must publish the page to view the feed.


"Card-Style" Wordpress (News) Feed

Tuesday, September 28, 2021

Valencia To Begin Composting Food Waste at East Campus Cafeteria

Orlando – Valencia College is launching a food waste recycling program at its East Campus cafeteria, where college officials estimate more…

Wednesday, September 15, 2021

A Time for Peace: Valencia to Host Peace Workshops, Documentaries

At Valencia College, we hold peace and justice champions in high regard — including Pakistani activist Malala Yousafzai, American civil rights…

Thursday, September 02, 2021

Valencia Announces Plans for 9/11 Tribute Event

This year, Valencia College will commemorate the 20th anniversary of the September 11th terrorist attacks with a virtual tribute on Sept. 10…


Horizontal Cards

Sample Title

Body text goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

Sample Title

Body text goes here.

Title
Title

Title

View Profile

Title
Title

Title

View Profile


Vertical Cards

Basic Card With Image

Quis ipsum suspendisse ultrices gravida dictum. Fringilla urna porttitor rhoncus dolor. Consequat id porta nibh venenatis. Sagittis aliquam malesuada bibendum arcu. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque.

Basic Card With Image

Quis ipsum suspendisse ultrices gravida dictum. Fringilla urna porttitor rhoncus dolor. Consequat id porta nibh venenatis. Sagittis aliquam malesuada bibendum arcu. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque.

Basic Card With Image

Quis ipsum suspendisse ultrices gravida dictum. Fringilla urna porttitor rhoncus dolor. Consequat id porta nibh venenatis. Sagittis aliquam malesuada bibendum arcu. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque.

Header 1

Body Text 1

Header 2

Body Text 2

Header 3

Body Text 3

Cards are available with or without images, in two or three to a row:

Card Without Image

Quis ipsum suspendisse ultrices gravida dictum. Fringilla urna porttitor rhoncus dolor. Consequat id porta nibh venenatis. Sagittis aliquam malesuada bibendum arcu. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque.

Card Without Image

Quis ipsum suspendisse ultrices gravida dictum. Fringilla urna porttitor rhoncus dolor. Consequat id porta nibh venenatis. Sagittis aliquam malesuada bibendum arcu. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque.


 

Special Cards:
"Facts" Cards

These cards have to be used somewhat carefully. A very small number of characters can be inserted before it wraps on most screens.

Gold

Gold card text.

Grey 1

Light grey card's text.

Grey 2

Dark grey card's text. 

Red

Red card's text. 

 


Frequently Asked Questions

 

Question will go here
Answer will go here

Question will go here
Answer will go here

Section Title will go here

Question will go here
Answer will go here

Question will go here
Answer will go here

 

Question will go here
Answer will go here

Question will go here
Answer will go here

Section Title will go here

Question will go here
Answer will go here

Question will go here
Answer will go here


Faculty Development Courses

With the NOTE:

LCTS3291 Impacting Active Learning through Metacognition
10 PD Hours

This face to face course, is the first course in the Active Learning Certificate sequence. Throughout the course, participants will be introduced to the theories and principles of Active Learning, as well as gain an introduction to the Capstone portfolio assessment at the end of the certificate process. Specific emphasis will be placed on integrating and sharing active learning strategies into the classroom. Note: This course is required for Active Learning Certification.

Note: lorem lorem lorem With NOTE:

Without the NOTE:

LCTS3291 Impacting Active Learning through Metacognition
10 PD Hours

This face to face course, is the first course in the Active Learning Certificate sequence. Throughout the course, participants will be introduced to the theories and principles of Active Learning, as well as gain an introduction to the Capstone portfolio assessment at the end of the certificate process. Specific emphasis will be placed on integrating and sharing active learning strategies into the classroom. Note: This course is required for Active Learning Certification.


Tables

Column 1 Title Column 2 Title Column 3
Add more Columns if needed
Row 1, Column 1 Text Row 1, Column 2 Text Row 1, Column 3 Text
Row 2, Column 1 Text Row 2, Column 2 Text Row 2, Column 3 Text
Add more Rows if needed

Testimonials