Skip to main content
IMG_6569.JPG

Paragraphs Demo Page

If "Display as hero" is checked under "Page Settings," the page intro will be formatted so the image displays full-width and the title, description, and links appear over the top. This treatment is always used on the home page.

Apply
Major ALert

Alert

A stylized text box for deadlines, unexpected closings, or other short-term content. This one's in the Above Sidebar region to get it to the top of the page, but could also go in the Page Content region next to a sidebar. 

This is the Superhead Callout Box on Dark This is the subhead

Consider the subtleness of the sea; how its most dreaded creatures glide under water, unapparent for the most part, and treacherously hidden beneath the loveliest tints of azure. Consider also the devilish brilliance and beauty of many of its most remorseless tribes, as the dainty embellished shape of many species of sharks. Consider, once more, the universal cannibalism of the sea; all whose creatures prey upon each other, carrying on eternal war since the world began. Consider all this; and then turn to the green, gentle, and most docile earth; consider them both, the sea and the land; and do you not find a strange analogy to something in yourself? For as this appalling ocean surrounds the verdant land, so in the soul of man there lies one insular Tahiti, full of peace and joy, but encompassed by all the horrors of the half-known life. God keep thee! Push not off from that isle, thou canst never return!

 

Button with some text

Callout Box on Light

Consider the subtleness of the sea; how its most dreaded creatures glide under water, unapparent for the most part, and treacherously hidden beneath the loveliest tints of azure. Consider also the devilish brilliance and beauty of many of its most remorseless tribes, as the dainty embellished shape of many species of sharks. Consider, once more, the universal cannibalism of the sea; all whose creatures prey upon each other, carrying on eternal war since the world began. Consider all this; and then turn to the green, gentle, and most docile earth; consider them both, the sea and the land; and do you not find a strange analogy to something in yourself? For as this appalling ocean surrounds the verdant land, so in the soul of man there lies one insular Tahiti, full of peace and joy, but encompassed by all the horrors of the half-known life. God keep thee! Push not off from that isle, thou canst never return!

 

Button with some text

Superhead Generic Feature - with a long headline that wraps so we can stress test it Subhead

The water which supplies the farms of Mars is collected in immense underground reservoirs at either pole from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, lie the cultivated districts. These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers.

Feature CTA

Preclinical Students with Faculty - OMM

Campus-flavored feature VT tastes like turkey, obviously

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus integer feugiat scelerisque varius. Urna id volutpat lacus laoreet non curabitur gravida. Duis tristique sollicitudin nibh sit amet.

Visit

 

 

This is the headline for an accordion that is full page width

Here is some descriptive stuff to introduce the content in the accordion.

First Pane

More information about cats for cat people only. They can read lots of resources.

Second Pane

Information about dogs. Only dog people will click on this. Everyone else will leave it alone.

Third Pane

Everyone will click on this. What's a Space Hamster? (Actually he's a Youtuber but whatever.)

Meet the buttons

This is a test of a grid of buttons at full width. One of the component documents says this should be limited to about 7 per group, and "Use no more than one button group per page at full column width or no more than two button groups per page if pairing them together as blocks within the same Drupal paragraph."

Grid of Body Text

Same WYSIWYG options as Body Text, but contained in a grid layout pattern. This makes the WYSIWYG contents display in columns that behave responsively (stack on mobile, instead of squishing) and accessibly. Good for when you want 2 or 3 controlled columns of text (where the text in each column doesn’t change with screen width)

Cashman

There might be a lot of text here in Column 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Eget nunc lobortis mattis aliquam faucibus. Nisi porta lorem mollis aliquam ut. Vitae congue mauris rhoncus aenean vel elit scelerisque. Semper eget duis at tellus at urna condimentum mattis. In hac habitasse platea dictumst quisque sagittis purus sit. Egestas pretium aenean pharetra magna. 

Maybe we have big words in column 2 for some reason.

And some other regular words after that.

Column 3 could be a list.

  • Stuff one
  • Lots of stuff
  • Checklist of items for students to think about
  • More stuff here
  • You can put lots of stuff in these columns.

Grid of Media at Full Width

Remote video URL

Cras mattis consectetur purus sit amet fermentum.

Medical Students on Outreach Trip

Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

Source: Bob J. Photographer
Medical students practice applying a tourniquet.

Donec id elit non mi porta gravida at eget metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Grid of Media with Only One

Aerial view of the VCOM Virginia campus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grid of Statistics at Full Width

A list of numerical factoid panels. You can create them as you see fit.

50%

of statistics are missing in this case

Surgeon Female
1/2

of all statistics fall to the right of this grid.  Others fall just to the left.

Stethoscope

A Table of Photos (in Rows)

A photo table is a two-column grid with rows comprised of the Photo Table Row paragraph.

Photos
Descriptions
Hope Tobey DO

Name: Tobey Toberson

Position: Unknown

Duties: Randomly selecting images from the CMS and adding them the dev server, while juggling multiple tasks at once at the behest of her superiors, should they see fit to burden her with more and more tasks.  Making text wrap to multiple lines with long, drawn out, run-on sentences.

Kristen McConnell

Name: Diane McConnell

Ariana Martin

We're taught essential elements of medicine such as holistic thinking, integrative care, and hands-on care to diagnose, treat, and prevent illness and injury. This additional training sets us apart and makes us a high commodity to the medical community.

Ariana Martin , Class of 2011, Virginia Campus
Student and Alumni Testimonials

More testing

Maecenas faucibus mollis interdum. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.

Plain Body Headline

Intro text: Use the body component for rich text styles of running paragraph text.

(Intro text paragraph style is available in Styles drop-down.)

Inset Elements

You can nest certain components inside a body component so they appear in a block beside the text. Start a new Body component for each inset you want, and divide the body text up between them to make the insets line up at the top of the paragraph text that starts each new Body. 

Inset component options include:

  • Media (image, video)
  • Quote
  • Reference to one of the existing Location content types
  • A custom/one-off location that follows the same styles but you create unique for this page

Headings

Heading 2-6 styles are available in the Format drop-down.

H2

H3

H4

H5
H6

Accessibility in Headings

Use headings often to break up blocks of text. For accessibility compliance, always use header styles in semantic order (e.g., don't jump from H3 down to H6 just for looks, skipping over H4 and H5). 

Text Styles

You can build relative links to internal pages (just start typing the page name and choose from the list that populates), absolute links to any URL (include the "http://", e.g.), or files in the library (you can upload these from straight inside the WYSIWYG). Styles for links include:

Regular text links 

Fancy link

Create your link first, then highlight it and choose "fancy link" from the Styles dropdown in the WYSIWYG

Button

Create your link first, then highlight it and choose "button" from the Styles dropdown in the WYSIWYG

Bold and Italics styles are available in the formatting bar, as well as links and inline styles like:

  • Unordered lists (bullets), with several spacing styles and options for 2 or 3 columns
  • Ordered lists
  • Tables
  • Horizontal rules

Body with Inset

Varius quam quisque id diam vel quam elementum. Faucibus interdum posuere lorem ipsum dolor. Amet volutpat consequat mauris nunc. Arcu vitae elementum curabitur vitae nunc sed. Nam at lectus urna duis convallis convallis tellus id. Velit ut tortor pretium viverra suspendisse potenti nullam. Cras semper auctor neque vitae tempus quam pellentesque nec nam. Eu non diam phasellus vestibulum lorem sed. Tristique senectus et netus et malesuada fames ac turpis. Mauris augue neque gravida in. A erat nam at lectus urna duis convallis convallis. Gravida in fermentum et sollicitudin. Maecenas pharetra convallis posuere morbi leo urna molestie at elementum. Enim nec dui nunc mattis enim ut tellus. Accumsan tortor posuere ac ut consequat semper viverra. Mi eget mauris pharetra et ultrices neque ornare aenean euismod. Aliquet bibendum enim facilisis gravida. At augue eget arcu dictum varius duis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Diam in arcu cursus euismod quis viverra nibh cras pulvinar.

And More Here

Nec ultrices dui sapien eget mi. Lectus urna duis convallis convallis tellus id interdum. Amet cursus sit amet dictum sit. Magna sit amet purus gravida quis blandit turpis cursus in. Sem et tortor consequat id porta. Ut etiam sit amet nisl purus in mollis nunc. Malesuada pellentesque elit eget gravida cum sociis natoque. Cras ornare arcu dui vivamus arcu felis bibendum ut. Nunc lobortis mattis aliquam faucibus purus in. Et tortor at risus viverra adipiscing at in. Massa massa ultricies mi quis. Ac tortor dignissim convallis aenean et. Molestie a iaculis at erat pellentesque adipiscing. Sed ullamcorper morbi tincidunt ornare. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Ut lectus arcu bibendum at varius vel.

Body with Inset

Varius quam quisque id diam vel quam elementum. Faucibus interdum posuere lorem ipsum dolor. Amet volutpat consequat mauris nunc. Arcu vitae elementum curabitur vitae nunc sed. Nam at lectus urna duis convallis convallis tellus id. Velit ut tortor pretium viverra suspendisse potenti nullam. Cras semper auctor neque vitae tempus quam pellentesque nec nam. Eu non diam phasellus vestibulum lorem sed. Tristique senectus et netus et malesuada fames ac turpis. Mauris augue neque gravida in. A erat nam at lectus urna duis convallis convallis. Gravida in fermentum et sollicitudin. Maecenas pharetra convallis posuere morbi leo urna molestie at elementum. Enim nec dui nunc mattis enim ut tellus. Accumsan tortor posuere ac ut consequat semper viverra. Mi eget mauris pharetra et ultrices neque ornare aenean euismod. Aliquet bibendum enim facilisis gravida. At augue eget arcu dictum varius duis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Diam in arcu cursus euismod quis viverra nibh cras pulvinar.

Grid of Body Text

Need to make two columns of text that's not just a list? Use a Grid of Body Text (to make your body text blocks in a grid format.

(If all you need is a columned list, you can do that inside the regular Body Text paragraph, make your list items first, then select them and choose one of the 2- or 3-column options from the Styles dropdown in the WYSIWYG.)

Column 1 

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

Column 2

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

Column 3

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

Grid of Buttons

This component can be useful for in-page navigation. (But use sparingly! It has a lot of visual weight, and can damage usability of your actual global navigation.)

Grid of Media

Different from a Gallery, which uses a tiled masonry layout. This one puts individual media files into the basic grid layout that the other griddable items use. It's better for controlled spacing, like for a set of committee member headshots or a stack of partner logos. 

Short caption/label.

Sneha Shah, VCOM-Virginia Class of 2019
Source: Or maybe use the source field

Grid of Media With Only One

If this doesn't work it will need its own paragraph type.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed.

Source: VCOM

Grid of Statistics

Optional description field.

23%

of VCOM students are from rural communities with populations under 10,000

Doctor
#3

most affordable private medical school according to U.S News & World Report

Wallet
56%

of graduates are practicing in rural or medically underserved areas

Bank

Accordion

Accordions are best for splitting up content that applies to different types of users, e.g., details specifically for international admissions, first-year admissions, transfer admissions. If most users would want to read each panel anyway, skip the accordion and use regular Body Text with subheading sections instead, so they don't have to keep clicking to read the whole page. 

This accordion component uses the regular Body Text paragraph inside each panel, so you have all the same text styling and inset options. 

Pane One

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

 

Pane Two

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

Pane Three

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

Pane Four

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

Photo Table

This layout gives you an accessible and responsive-friendly way to put images into a table format. It's useful for things like lists of committee members or scholarship winners, where you need to pair text about each person with their headshot.

Include labels/headlines for the columns (required) to make this table meet accessibility requirements for screen readers. 

Label for Photo Column
committee member description

Photo table row 1 (person 1's info)

Hope Tobey DO

Photo table row 2 (person 2's info), this could be a long description like: 

The combination of field and laboratory learning empowers students to contribute to the fields of energy, natural hazards, engineering, environmental remediation, and climate science.

Button

Fancy Link

Viastar logo

Photo table row 3

Photo Table Flipped

A photo table can also be flipped so images are on the right and text is on the left.  Especially helpful if you have instances where there is no image in a row.  That way text will be consistent on the left, which makes things easier to scan top to bottom.

Photo Column Label
Content Column Label
Mary Ann Taylor

Photo table row 1 (person 1's info)

This Person did not provide a photo.  As hard as we tried, we couldn't find them lurking in the halls.  It's like they could feel us coming, and just as we knocked on their office door, they parachuted Mission Impossible-style out their second story window (a bit dramatic, but so is not responding to calls for headshots).

Maybe we link to their profile page

Hope Tobey DO

Person 3's info.  Person 3 always provides a headshot.  Unlike some people we know.

Minor ALert

Alert

Alert paragraphs can also go next to a sidebar.

Test table
  Column A Column B
Row 1 Stuff goes here And over here
Row 2 And over here And over here
Row 3 And over here And over here
Row 4 And over here And over here

 

Virginia Campus Updates

Radford Athletics Announces Partnership with VCOM for Sports Medicine Center

Radford University Athletics and the Edward Via College of Osteopathic Medicine (VCOM) have entered a partnership to provide Highlander student-athletes a state-of-the-art 4,300 square foot sports medicine facility. In addition, Radford University Athletics will continue to be a training ground for young physicians in the VCOM Sports Medicine Fellowship.

Read More

Carolinas Campus Updates

A Carolinas Related Headline for Something Newsworthy

A Really great thing happened in Spartanburg that affected VCOM Carolinas in a positive way. This story will warm the hearts of those who read it and surely fill their souls with mirth.

Read More

Auburn Campus Updates

Day in the Life of a Medical Student

An Auburn Related Headline for Something Newsworthy

A Really great thing happened in Auburn that affected VCOM Auburn in a positive way. This story will warm the hearts of those who read it and surely fill their souls with mirth.

READ MORE

Louisiana Campus Updates

A Louisiana Related Headline for Something Newsworthy

A Really great thing happened in Louisiana that affected VCOM Louisiana in a positive way. This story will warm the hearts of those who read it and surely fill their souls with mirth.

READ MORE

m0ar test

  • Integer posuere erat
  • a ante venenatis dapibus
  • posuere velit aliquet.
  • Donec sed odio dui.
  • Vivamus sagittis lacus
  • vel augue laoreet rutrum
  • faucibus dolor auctor.
  • Curabitur blandit
  • tempus porttitor.

 

Photo Table

Photo
More information
Rachel Brownell

Quam Lorem

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.

Jonathan Doty

Nullam quis

Risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.

Rachel Horn

Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.

Content and Feed Test

This is to test the "Content and Feed" content type.

Body Text Grid Goes Here

Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.