Skip to main content
Visit
Apply
Give
Future Students Current Students Parents & Families Community Alumni Faculty Staff The Media
About St. Mary's College of Maryland

Web Style Guide

Communications and Marketing Resources > Web Style Guide

Optional Intro Headline

You can add this intro section by adding the "smcm-intro-section" class to any widget that contains an h2 and span element.

Wooden chairs sit on a grassy shore overlooking a marina with rows of docked sailboats at sunrise or sunset.

Use the “SMCM Gold Buttons” widget to create a section of jump links at the top of your page.  Jump links work by assigning a “Row ID” under attributes and using “#yourid” as the link on your button.  The gold buttons will automatically display an icon corresponding to the type of link they point to.

Emphasized section title

Use the “SMCM Title” widget to create a section title, optionally with an emphasized word.

Three people stand on a dock by the water; one is in a St. Mary’s Seahawks mascot costume, and the others wear a St. Mary’s shirt and a green patterned shirt. Sailboats are in the background.
A group of students and a teacher write on a whiteboard table and discuss ideas in a classroom with several other groups working in the background.

The zig-zag layout

The alternating image and text layout is a great way to showcase eye catching imagery and important content.  On mobile these columns become stacked, to ensure the image is always on top select Row Settings > Layout > Collapse Order > “Right On Top” for rows where the image is on the right.

Call to action

The “SMCM Call to Action” widget allows you to create a clickable button for important links such as a registration.

A woman wearing headphones and smiling sits at a desk with a laptop in a classroom filled with other students.

Fact & Highlight Cards

2

Fact card options to choose from

SMCM Highlight Card

This card allows for a highlighting an item using an image, title and supporting text field.  These cards also support links

4

Different styles to choose from.  The SMCM Fact and Highlight cards support 5 different styles (red, navy, light blue, gold and transparent).

Three female soccer players in uniforms stand on a grassy field in front of a goal, looking into the distance on a clear day.

SMCM Highlight Card

This card allows for a highlighting an item using an image, title and supporting text field.  These cards also support links

Quote Block

"I loved my time at St. Mary's, and I took advantage of a lot of opportunities to get involved on campus."

- Taylor Schafer '15 MAT '16

A woman in a black suit and blue blouse stands in front of a blue Cecil County Public Schools backdrop, smiling at the camera.
A woman stands by an outdoor chalkboard teaching a group of students, with diagrams and text visible on the board. The students are seated or standing, listening and taking notes.

Accordion

Use the SMCM Accordion widget to help users digest a large amount of content.  A great example of this is making an accordion for each question on a FAQ page.

SMCM Accordion

The SMCM Accordion Widget supports an optional icon shown before the title.

SMCM Accordion

This widget also supports being open by default.

Latest News

Psychology Professors Publish with Alumni

Psychology Professors and Students Present Research

Inauguration of President Rhonda Phillips

The latest news block can be used to display recent news for a specified category (department, major, office, etc).

Latest Events

Annual Spring Research Symposium, May 1

May 1, 11:30 a.m. – 1 p.m.

2026 Commencement

May 16, All Day

13th Annual Chesapeake Writers’ Conference

June 21 – 27, All Day

The latest events block can be used to display future events for a specified category (department, major, office, etc).

Slider

  • A woman wearing headphones and smiling sits at a desk with a laptop in a classroom filled with other students.

    This is an example of a caption on a slide

  • A woman stands by an outdoor chalkboard teaching a group of students, with diagrams and text visible on the board. The students are seated or standing, listening and taking notes.

    Another caption

  • Three people stand on a dock by the water; one is in a St. Mary’s Seahawks mascot costume, and the others wear a St. Mary’s shirt and a green patterned shirt. Sailboats are in the background.

    Sliders suport multiple items

    The “SMCM Slider” widget is used to showcase multiple images in a condensed format.

    Spacing

    When working with diverse types content it sometimes becomes necessary to add or remove spacing between certain elements.  To add space between rows, please adjust the bottom margin property in the layout section of the row.

    When it is necessary to adjust space around a specific block / widget please change the margin under layout in the widget editor.

    When doing this please make sure to change the units of margin to em. An example of common values would be 0, 1, 1.5, 2, avoid using the px (pixels) unit.  This also applies to padding.

    A settings panel shows "Layout" with a "Bottom Margin" input set to 0 and "em" selected as the unit. Text below says the default is 30px.
    A user interface showing margin settings with four input fields set to 1 em each, under the "Layout" section, with the label "Margins around the widget.

    Alignment

    Most rows on pages should be vertically centered, especially when using the zig-zag layout.  To achieve this set the Column Vertical Alignment to be Center under the Layout section of the row attributes.

    Images should be horizontally centered so that they have even whitespace in their respective column.  To achieve this always use the SiteOrigin Image widget and make sure to set the Image Alignment to be center.

    A dropdown menu labeled "Column Vertical Alignment" is set to "Center.
    A dropdown menu labeled "Image alignment" with the option "Center" selected and a downward arrow indicating more options.

    Other Resources

    Other helpful resources for creating content on the web.

    smcm campus view

    List of SMCM Widgets

    • SMCM Accordion
    • SMCM Button
    • SMCM Card Container
    • SMCM Gold Buttons
    • SMCM Quote
    • SMCM Slider
    • SMCM Title
    A dropdown menu titled "Add Widget to Column" displays widget options filtered by the text "smcm" typed in the search box.

    Contact Us

    Communications and Marketing

    Calvert Hall, 2nd Floor
    Meet the Staff
    (240) 895-2045
    communication@smcm.edu