College Marketing
Back to All Babson
Close
Babson College home Centers & Institutes

Profile Card Instructions

image-fly-right.jpg

Profile Name

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

image-fly-right.jpg

Profile Name

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

image-fly-right.jpg

Profile Name

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

image-fly-right.jpg

Profile Name

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Profile Cards with White Text and No Background

image-fly-right.jpg

White Text

No Drop Shadow

"No Background" and "Make All Text White" chosen.

White Button
image-fly-right.jpg

White Text

No Drop Shadow

"No Background" and "Make All Text White" chosen.

White border with No Fill
image-fly-right.jpg

White Text

No Drop Shadow

"No Background" and "Make All Text White" chosen.

Tag Link
image-fly-right.jpg

Modal »

Modals have Centered Text

MORE …

Profile Cards on Light Backgrounds

Note: When background is "No Background" and is the text is not "Make All Text White", links will Babson Green and "White" or "White with No Fill" buttons will be Courtyard Green.

Also, for modals, if button are "White" or "White with No Fill", they will be Courtyard Green in the modal.

image-fly-bg.jpg

Small Text

Cedar Key Lt Background

Small Text Description Link.

White Button Showing as Courtyard Green
image-fly-right.jpg

Small Text

Sweet Daphne Lt Background

Small Text Description Link.

White Border with No Fill Chosen
image-fly-left.jpg

Small Text

Blue Heather Lt Background

Small Text Description Link.

Tag Link

Best Practice on Displaying Profile Cards

When one Card is in a row, use styling "Image Left with Text Right" 

image-fly-up.jpg

Image Left with Text Right - USE THIS

Better to use this for 1 Card.

Large Text. Weather Channel ullamco laboris nisi ut aliquip .

White with Gold Border
image-fly-up.jpg

Image Left with Text Below - NOT THIS

Better to Not use this for 1 Card.

Large Text. Weather Channel ullamco laboris nisi ut aliquip .

White with Gold Border

Use the Center Text option with less text and many cards in a row

image-fly-right.jpg

USE THIS

With Less Text

Tag Link
image-fly-left.jpg

Centered Text

Drop Shadow Removed

Tag Link
image-fly-down.jpg

Centered Text

Drop Shadow Removed

Tag Link
image-fly-right.jpg

Centered Text - NOT THIS MUCH TEXT

Should be Used in Smaller Cards with Less Text

Large Desktop 18 | tablet + mobile 14px. Horizontal Card 2 or more card sin a row. 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 Weather Channel ullamco laboris nisi ut aliquip .

White with Gold Border
Visit Profile Card Test Page

More Profile Card Examples

Goes in: Main content area + Advanced Grid Wrapper
Margin-bottom: 6rem (with margin-bottom options)

Has options for:

  • Animation
  • Make the card a modal
  • Background colors
  • Make All Text White (must have "no background" chosen)
  • Headshot image
  • Top border