Web Style Guide Navigation

Text Styling

When it comes to words on webpages, nothing is more important than readability. The Marlboro design system allows some variation in text styling, while ensuring consistency across the site; this page describes the options that are available for formatting page content.

Some styles (like the intro paragraph above) are baked into the site design, and can’t (or shouldn’t) be changed. 

The same is true of this basic text style; it’s designed to be as readable as possible, and is sized specifically to meet accessibility guidelines. (The font size adjusts for readability across a range of devices.)

Standard content formatting

Most pages can be entered as standard page content, without any formatting at all beyond the defaults. The editor toolbar offers buttons for all basic page formatting: bold and italics, bulleted and numbered lists, text orientation, and indenting.

Style alternatives

The editor offers a number of options for content editors who want to style their content beyond the default styling. If you’re trying to accomplish something specific with the styling of your page beyond the current options, please drop a line to our web team and we’ll help you figure out the right path.

Basic page text

There are at least three alternative styles that can be applied to basic page text; these are available via the “Formats” menu that’s shown while editing a page. 

“Large text” makes text slightly larger. 

“Small text” makes text slightly smaller.

“Callout box” sets text apart in a shaded box.

(This style can be applied to multiple paragraphs and headers.)

 

Header options

(TBA while we discuss the header options to be included in the system.)

How to create buttons

To create a button, first select some text and click the link button in the page editing toolbar.

Choose your link destination and then select your desired link style from the dropdown (see below). Normal links will default to the “normal” link style followed by the various button styles.

LiveWhale add link modal.

Turning a link into a button

If you have an existing link that you want to make into a button, just put your cursor in the link and click the “Formats” menu; you’ll see the same set of options there. (The options only appear when your cursor’s in an existing link.)

Button options

Standard button

Our Mission

Rounded button

Our Mission

Rounded button with arrow

Our Mission

Using tables

(Discussion of table usage and formatting options to come.)

Detours

(a mostly random selection of Marlboro microdestinations)