Promo
On this page
- How to use a Promo
- Watch: How to create a Promo
- Example: Promo with image on the left
- Required fields
- Optional fields
- When to consider something else
- More examples
- Example: Image Gallery Promo
- Example: Illustration Promo
- Example: No image Promo
- Example: Stacked Promo 1
- Example: Stacked Promo 2
- Get support
How to use a Promo
A Promo highlights a single key initiative, priority or other content. The Promo adds visual interest to a page with color and a photograph or illustration.
Tips:
- Use the Promo on a Landing Page or on a Basic Page.
- Optionally showcase more than one image in an auto-rotating image gallery.
- Avoid using more than 3 Promos on one page.
Watch: How to create a Promo
See how to create a Promo on your website.
Example: Promo with image on the left
Savor the authentic flavors of the Chesapeake with a seat at a traditional backyard crab feast, seasoned with local history and a dash of coastal charm.
Required fields
1. Title – 75 characters max
The Title is a heading that introduces the Link.
2. Link – 50 characters max
The Link has a label and a destination URL. The Link can go to a page on your website, or to an external website. If the Link goes to an external website, it will include an icon indicating that it goes to an external website
3. Promo Style
Select one of four Promo Styles: no image, image on the left, image on the right, and illustration.
Image Promo
- Use a single image, or include more than one image to show an auto-rotating image gallery.
- The images must be portrait orientation.
- Each image size is 510x680 pixels (3:4 aspect ratio).
Illustration Promo
Select from any of the available illustrations:
- Maryland Flag
- State House
- State House Dome
- Sailboat
- Lighthouse
- Sand dune
- Tractor
- Barn
Optional fields
1. Description – 250 characters max
The Description is optional. It provides additional context for the Link. We strongly encourage you to use the Description.
When to consider something else
Use a Link Collection or Visual Link Collection when you need to show more than one link.
More examples
Example: Image Gallery Promo
Savor the authentic flavors of the Chesapeake with a seat at a traditional backyard crab feast, seasoned with local history and a dash of coastal charm.
Example: Illustration Promo
Savor the authentic flavors of the Chesapeake with a seat at a traditional backyard crab feast, seasoned with local history and a dash of coastal charm.
Example: No image Promo
Savor the authentic flavors of the Chesapeake with a seat at a traditional backyard crab feast, seasoned with local history and a dash of coastal charm.
Stacked Promos
Promos with images stack when used one after another.
Example: Stacked Promo 1
Savor the authentic flavors of the Chesapeake with a seat at a traditional backyard crab feast, seasoned with local history and a dash of coastal charm.
Example: Stacked Promo 2
Savor the authentic flavors of the Chesapeake with a seat at a traditional backyard crab feast, seasoned with local history and a dash of coastal charm.
Get support
Ask questions about the Maryland Drupal CMS, Maryland Web Design System (MDWDS), accessibility, plain language, and more.