Barnard College Barnard College
Examples for Website Content Managers

Article Page Example

This is "Teaser Text" typically used as a subhead to provide a short summary of the article or the "DEK"

November 15, 2022

About this example

Article pages are used for news stories throughout Barnard's main website and mini sites. See how to set up an article page on Barnard's Website Resources site.

This page type an optional hero image component at the top. The hero does not currently allow for a photo caption.

Components available

This text is displayed in a "Body WYSIWYG" component, which is the workhorse for an article. It's where the bulk of your text will be. You can also embed images in your Body WYSIWYG.

Images can be displayed with different alignments. Notice how images that are centered on the page appear larger. Captions can also be added to images to provide content or photographer credit.

PCP-Perna
This is a left-aligned image

 

Senator-Cleare,-Emma-Wolfe,-Student.-October-2022
This is a right-aligned image

 

PCP-Perna
This is a centered image

 

Other components available for use on an article page include the following and are shown below:

  • Full Screen Image: You may want to use this option instead of the hero because it provides a place to give a photo caption and credit to the photographer. We're working on getting a caption added to the hero image.
  • Full Screen Intro Text: This is more commonly used on other kinds of pages, but it's also useful to emphasize text. It's similar to the Quote component.
  • Quote: Works best with short text, a sentence or two.
  • Sidebar: A visual way to let your reader know the main story has ended or changed gears and it allows for an image.
  • Columns: This component can be good for headshots and short bios.
  • Flexible Text and Image Slider: Great for showing a range photos of different sizes and orientations.
students at big sub posing with sandwich
Full Screen Image Component. Similar to the hero image at the top of the page (compare the crop), but includes a caption.

Full Screen Intro Text

This text has no styles applied. The centering is automatic.

Another Body WYSIWYG to separate components.

 

Quote component: The name of the person being quoted is in a separate textbox and is not required. The quotation marks around this text are added automatically.

Susan B. Anthony

Sidebar Title

McAC students dressed in costumes at big sub

Sidebar Title

Sidebar text. The different background color helps indicate a change in topic.

One image can be included in the sidebar. So far, we haven't detected any difference between "Left" and "Left(Full Column)" from the image position drop down.

Another Sidebar

val monaco and access barnard

Another Sidebar

Sidebar text. The background color options are beige and light blue.

One image can be included in the sidebar. This one uses the "Right" option for displaying the image.

Yet Another Sidebar, No Image

Yet Another Sidebar, No Image

Image is not required, so let's see what a sidebar looks like without one.

Image is not required, so let's see what a sidebar looks like without one.

Image is not required, so let's see what a sidebar looks like without one.

Image is not required, so let's see what a sidebar looks like without one.

Image is not required, so let's see what a sidebar looks like without one.

Columns: This Header is optional; it allows no formatting

student taking a bit of a sandwich at big sub

This pair of columns is the 70%-30% option.

Columns for Headshots

val monaco selfie
Val Monaco
Sophia Lopez '26
S Lopez
Fahitza Quessa '26
F Quessa

Flexible Text and Image Slider (this title is required but it can be hidden)

This is a Slide Title

This is slide text.

This component automatically includes a lot of white space above and below it.

Slide text w/o a title.

Flexible Text and Image Slider (dark mode)

Slide Title

If you select, "Dark Mode," you'll also need to add a background image, which gives the dark blue a little texture.