Featured Card Title #1
This card has no image or link.
We recommend you NOT check the "Animated with borders" checkbox beneath the optional title at the top of this component. It makes the required link below show over the top of the middle card.
Landing Page Example
This page type has many visually engaging components. We've grouped similar components together so you can more easily compare them.
Note: This is a Full Screen Intro Text component.
About this example page
Section landing pages are used on Barnard's main site as the "home page" for a program or office. See how to set up a section landing page on Barnard's Website Resources site.
This page type has many visually engaging components. We've grouped similar components together so you can more easily compare them.
Note: This is a Body WYSIWYG component.
Large, full-width image components
Several components use an image that fills the whole width of the browser window. They include the following:
- Full Screen Spotlight (the same example image is used here and in the Single Feature component for comparison)
- Full Screen Video Player (video must be on YouTube)
- Single Feature (the image is automatically darkened a bit so the text shows up well)
- Voices & Stories (more than one story can be added so that it functions somewhat like the Flexible Text & Image Slider)
Images for these components should be at least 1600 pixels wide. They are cropped automatically, so be sure to use the focus and preview functions when uploading a new image.
Full Screen Spotlight
Required fields include the title, description, image, link, link text, and align.
Align "normal" places a white box over the left side of the image. "Reverse" puts it on the right side.
Images should be at least 1600 pixels wide.
Full Screen Video Player Links to YouTube
Super Title
Single Feature Image
Keep the text brief. It will be displayed over the image. The link must be internal, not to an external site.
Components with smaller images
- Flexible Text and Image Slider (great for images of different sizes, accommodates horizontal or vertical photo orientation; Voices & Stories requires a full-width image)
- Split Screen Feature (can stack this component to show more than one "row" of image/text or text/image pairs)
- Bits & Pieces Grid (usually used in groups of 3 text/image pairs; this component accommodates less text than the Split Screen Feature)
- Three Across Featured (can be used with or without images and links)
Flexible Text and Image Slider
Super Title, optional
Split Screen Feature
Here's the description text, which is optional.
Note: The image is also optional, but the point of this component is to juxtapose an image on one side with text on the other.
Title, orientation, and color theme are required.
Bits & Pieces Grid
Short text description. This field is required, as is the associated image field.
If you use only 2 images, they'll display larger than 3 will.
Another short description. This component works well with 2 or 3 "bites" or text-image pairs.
Third section of text.
Three Across Featured
Events-focused components
- Three Featured Events Manual (choose 3 specific events to display)
- Event Content Listing (choose a "category" of events, display in a list with a link to more events shown with a pager)
Three Featured Events Manual
Dec
2
-
Hybrid / 516 Milstein + Virtual (Register for link)
Nov
29
Dec
16
Event Content Listing
Dec
20
Feb
20
Story-focused components
These components allow you to link to already created stories on Barnard's website.
- Three Manual Stories (includes the associated images automatically)
- News Listing (select a "category" of news items from the Taxonomy; set to display 3 only in this example)
Three Manual Stories
What it means to be first — then and now.
November 7, 2022
The determined and introspective midfielder shares how she stays competitive — and nearly invincible on the field.
December 2, 2022
The College welcomed nearly 400 high school students through the gates this summer.
December 5, 2022
News Listing
Tapped by the Costume Institute to curate its annual blockbuster exhibition, professor Monica L. Miller is using her research on Black style to educate fashion enthusiasts on Black dandies.
Follow along to learn how the two economics majors kicked off National Girls and Women and Sports Day (February 7).
The political ecology senior considers the connection between climate change and corporations while working for the NFL Foundation.
Short text components
- Full Screen Intro Text: Typically used at the top of a page (like the one at the top of this page) but it also works for short text between more visual-heavy components (how to set up)
- Contextual Giving CTA (we recommend you use the beige Barnard logo pictured below as your background image. It is named "logo-barnard-monogram-beige_1.png" in the CMS media library; how to set up)
- Numbers & Stats (how to set up)
This component requires a title, description, background image, link, and link text.
The background is beige and covers the full width, but the image does not.
Numbers & Stats
11
Number of visual-heavy components available, including this one.
This is an example of a Quote component. The name of the person being quoted is in a separate textbox, the Attribution. The quotation marks around this text are added by the component.
Susan B. Anthony
Available components not demonstrated here
These components require special code to be inserted, so they are not shown as examples:
- Email Sign Up
- Social Media Feed
Columns is another component not demonstrated here. It's better used on pages with fewer visually rich options. See the Basic Page Example.