Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Style Guide
Type Styles
Below are the typographic styles available when working with text. Many components have preset typographic styles that can serve as a good reference when setting headlines, subheadlines, body text, or captions.
Heading 3
Heading 4
Paragraph
WYSIWYG (What you see is what you get.)
WYSIWYGs are our most flexible communication component. Used primarily under the hero, the WYSIWYG can set the scene for the rest of the page in a simple, legible way. It can have multiple paragraphs of text and allows for customization of type and elements.
If the WYSIWYG is under the hero on a page, it must have a sidebar menu, whether it be it’s own or inherited from the landing page above it.
Link List
The link list visually organizes a series of links or text.
Options:
- Background can be blue or grey.
- Choose links or text.
- Up to 7 line items in each column.
Link List Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor.
Link List Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
-
This is a placeholder line item.
Body
This component allows for body content to be formatted in a branded way. Body copy should not exceed two or three paragraphs.
Options:
- Background can be blue with an image, solid light blue, solid dark blue, white, or grey. If an image is used in the background it should never be of someone’s face. Landscapes or images of general texture work the best.
- Vertical accent lines can be turned on or off and can be Dark Blue, Medium Blue, Light Blue, or Yellow. They can be set to appear on the right or left hand side and can be full length or the length of the content’s starting or ending points.
Body Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Sit amet tellus cras adipiscing enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. In hendrerit gravida rutrum quisque non.
Sagittis aliquam malesuada bibendum arcu vitae. Commodo nulla facilisi nullam vehicula ipsum a. Mollis aliquam ut porttitor leo. Amet volutpat consequat mauris nunc. Mauris a diam maecenas sed enim ut. Suspendisse ultrices gravida dictum fusce. Mauris ultrices eros in cursus turpis massa tincidunt. Viverra nam libero justo laoreet. Proin fermentum leo vel orci porta non pulvinar. Id nibh tortor id aliquet lectus proin.
Body Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Sit amet tellus cras adipiscing enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. In hendrerit gravida rutrum quisque non.
Sagittis aliquam malesuada bibendum arcu vitae. Commodo nulla facilisi nullam vehicula ipsum a. Mollis aliquam ut porttitor leo. Amet volutpat consequat mauris nunc. Mauris a diam maecenas sed enim ut. Suspendisse ultrices gravida dictum fusce. Mauris ultrices eros in cursus turpis massa tincidunt. Viverra nam libero justo laoreet. Proin fermentum leo vel orci porta non pulvinar. Id nibh tortor id aliquet lectus proin.
Body Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Sit amet tellus cras adipiscing enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. In hendrerit gravida rutrum quisque non.
Sagittis aliquam malesuada bibendum arcu vitae. Commodo nulla facilisi nullam vehicula ipsum a. Mollis aliquam ut porttitor leo. Amet volutpat consequat mauris nunc. Mauris a diam maecenas sed enim ut. Suspendisse ultrices gravida dictum fusce. Mauris ultrices eros in cursus turpis massa tincidunt. Viverra nam libero justo laoreet. Proin fermentum leo vel orci porta non pulvinar. Id nibh tortor id aliquet lectus proin.
Body Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Sit amet tellus cras adipiscing enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. In hendrerit gravida rutrum quisque non.
Sagittis aliquam malesuada bibendum arcu vitae. Commodo nulla facilisi nullam vehicula ipsum a. Mollis aliquam ut porttitor leo. Amet volutpat consequat mauris nunc. Mauris a diam maecenas sed enim ut. Suspendisse ultrices gravida dictum fusce. Mauris ultrices eros in cursus turpis massa tincidunt. Viverra nam libero justo laoreet. Proin fermentum leo vel orci porta non pulvinar. Id nibh tortor id aliquet lectus proin.
Body Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Sit amet tellus cras adipiscing enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. In hendrerit gravida rutrum quisque non.
Sagittis aliquam malesuada bibendum arcu vitae. Commodo nulla facilisi nullam vehicula ipsum a. Mollis aliquam ut porttitor leo. Amet volutpat consequat mauris nunc. Mauris a diam maecenas sed enim ut. Suspendisse ultrices gravida dictum fusce. Mauris ultrices eros in cursus turpis massa tincidunt. Viverra nam libero justo laoreet. Proin fermentum leo vel orci porta non pulvinar. Id nibh tortor id aliquet lectus proin.
Hero: Homepage
This Hero should be reserved for special instances such as the college’s landing pages for its bold, impactful presence. Headlines and Subheadlines should be very short.
Options:
- Up to 2 CTA Links
Hero: Default
This is the standard hero used for most instances on the site. Headlines should not exceed two lines of text at Desktop breakpoints.
Default Hero Headline
Hero: Program
This is the hero used for pages dedicated to programs. Headlines should not exceed two lines of text at Desktop breakpoints. The intro copy section can expand to reveal a larger amount of copy.
Program Hero Headline
Intro copy goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quick Facts
The Quick Facts callout is great for featuring impressive LVC statistics. There can be up to four statistics highlighted, but we recommend only using three each time.
Options:
- Background Color:
70%
Supporting Data Text
#80
Supporting Data Text
Over 90
Supporting Data Text
70%
Supporting Data Text
#80
Supporting Data Text
Over 90
Supporting Data Text
70%
Supporting Data Text
#80
Supporting Data Text
Over 90
Supporting Data Text
70%
Supporting Data Text
#80
Supporting Data Text
Over 90
Supporting Data Text
Gallery
This Gallery component showcases photos and allows for a horizontal click-through. It has a headline and body copy. It should only be used if 5 or more photos are available to be added.
Gallery Headline
Body copy goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Photo and Video Grid
The Photo and Video Grid is an eye-catching and large-scale way to show off a number of photos or videos. It has a headline, body copy, and toggle function that allows users to sort the photos and videos. A combination of twenty total images or videos are needed for this component.
Grid Headline Start Grid Headline End
Full-Width: Image or Video
Full Width Image:
- Confined to the margins of the site.
- Optional: Headline across Image
Full Width Video:
- This version of the component should be reserved for special circumstances where we want to display something big, impactful, and eye-catching
- Optional: Headline across Video
Full-Width Image Headline
Full-Width Video Headline
Full-Width: Program Finder
The Program Finder is an easy to use search function that helps the user filter and search for programs or degrees.
Optional:
- Hide Degree Type Dropdown
- Degrees and certificates shown
Program Finder Headline
One-Column: Four Buttons
This component allows you to break up a page with a full-width color background, a limited-use headline style, and text buttons. This component should not stack with other One Column: Four Buttons in succession. There are other engaging ways to display similar sorts of content that should be considered first (Carousel, Billboard, etc.).
Options:
- Background Color: Grey, White, Light Blue, Dark Blue
- 0, 1, 2, 3, or 4, buttons can be used
Two-Column: Testimonial
These Two Column callouts are great for featuring LVC individuals with room for a medium length quote. There can be up to two link-buttons as well as as one or two statistics.
Options:
- Arrow in Header can be turned on or off.
- Header Text Color:
Two-Column: Billboard
This component can display a number of related card callouts that contain an image, headline, description, and button.
Optional:
- Headline
- Description Text
- Up to 6 cards
Billboard Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Two-Column: Callout
This component is made up of an image or video, a headline, description and up to 4 CTA text buttons.
Options:
- Background Color: Light Blue, Dark Blue, White, Grey
- Image side: Left or Right
- Accent lines: Left or right sides
- Image or Video
- Up to three links
Two-Column Callout Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat.
Two-Column Callout Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat.
Two-Column Callout Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat.
Two-Column Callout Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Lobortis mattis aliquam faucibus purus in massa tempor. Quam viverra orci sagittis eu volutpat.
Two-Column: Callout Expanded
This component is made up of an image or video, a headline, description, and up to 1 text button.
Options:
- Background Color: Dark Blue, Light Blue, or Grey
- Accent lines: Left or right sides
- Image or Video
- Up to one link
- Up to three sections
- Headline Color: standard or accent
Three-Column: Callout
This component is made up of a headline, description, and up to 3 text button.
Options:
- Background Color: Light Blue or Grey
- Headline Color: standard or accent
- Up to 3 links
- Accent lines on left or right.
Three-Column: Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus.
Three-Column: Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus.
Accordion
Accordions allow us to display a large amount of information while keeping the scroll length of pages short and allowing uses to choose which information is important to them. Accordions have three sections that can each house a headline and body copy.
Accordion Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Date Cards
This component calls attention to upcoming important dates at LVC. Each card features a headline, description, and a date.
Options:
- Up to four cards
- Text Link
Date Cards Headline
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing .
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus.
Card Headline
Lorem ipsum dolor sit.
Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus.
Event Cards
This component highlights upcoming events at LVC. Each card features a headline, description, and a date.
Options:
- Text Link
Event Card Headline
News Cards
This component displays news at LVC. Each card links to a different news article preview.
Options:
- Select up to three news articles
News Article Title Headline
Profile Cards
Profile Cards highlight the staff and faculty at LVC.
Options:
- Select Staff or Uncategorized
Profile Cards Headline
Gabriela McEvoy
Chair of Languages
Professor of Spanish
mcevoy@lvc.edu
717-867-6253
Humanities 301-B
Ashley McFalls
Associate Professor of Neuroscience
mcfalls@lvc.edu
717-867-6198
Clyde A. Lynch 287-B
Sarah Shupp
Associate Dean of Student Affairs
Title IX Deputy Coordinator
shupp@lvc.edu
717-867-6238
Michael Slechta
Adjunct Instructor, Master of Music Education
slechta@lvc.edu
717-867-6383
Blair 111
