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.

Style Guide Basics

Content Usage Examples Content Row Examples Feed Examples Callout Boxes Horizontal Card Examples Vertical Card Examples Special Card Examples Frequently Asked Questions Testimonials

Content Usage Examples

Page Title

Intro Text

Section Title

Sub-Section Title

Valencia Body Text

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.

Human Resources Compensation

Location

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

Content Usage Examples

Full Width Section

Content Usage Examples

Two Column (50 - 50)

Header 1

Header 2

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.

Primary Link Additional Link

Link Section Title

Sample LInk Another Link Third Link

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.

Learn More

Callout Box - Grey Background

This example includes an image

Header

Body Text 1

Learn More

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.

Learn More

Event Callout Box

Short Event Title Goes Here

Description for the event or workshop goes here. It can be a couple sentences if needed. Try to keep is short and sweet.

Dates: 12/08/2020 06:00 PM

Get Tickets

Media 100 Callout Box

*** Broken component ***

Full Width, Grey Background, Container-Width Content

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.

Important Dates

26
Apr

Summer Tuition - Fee Payment Deadline (by 5:00 p.m. ET)

27
Apr

Late Registration Begins

29
Apr

Grades Due (Faculty Submission Deadline)

30
Apr

Final Grades Viewable in Atlas

"Card-Style" Wordpress (News) Feed

Problem loading feed.

Horizontal Cards

Card Title

Card description text goes here. 650 characters limit is recommended.
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.
Greater than 650 characters in a card description will expand the height of the card.

Link For Button

Card Title

Body text goes here.

Link For Button

*** Broken component ***

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.

Learn More

Basic Card With Image

Learn More

Basic Card With Image

Learn More

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

Card Without Image

Learn More

Card Without Image

Learn More

Left aligned Cards are available with or without images, in two or three to a row with two button option:

Header 1

Body Text 1

Learn More Learn More

Header 2

Body Text 2

Learn More Learn More

Header 1

Body Text 1

Learn More Learn More

Header 2

Body Text 2

Learn More Learn More

Header 3

Body Text 3

Learn More Learn More

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

Section Title will go here

Question will go here
Answer will go here

Section Title 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

Standard Table

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

Standard Table with Small class

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

Web Services