Enhance Your Product Management Skills During Your Lunch Break

Article Image

The purpose of this pattern library is to serve as a reference for how commonly used components should be marked up and styled. Mark On Product is written using Markdown. Most core components are written using GitHub Flavored Markdown. Many of the common patterns are detailed below, this cheatsheet is also helpful. The GitHub Markdown documentation also serves as a great reference.

Mark On Product is built using Jekyll, the theme is built from Lanyon and has been heavily customized.

Colors

There are several core “brand” colors, two primary colors and one secondary color.

Style Guide Brand Colors

.brand-green {color: #67a43e}
.brand-black {color: #272727}
.background-white {color: #fafafa}


Typography

The fonts choices are intentionally limited and each has a specific purpose. Post Titles h1 are set in Myriad Pro. Post Subpage Titles h2, Section Headers h3, and Subsection Headers h4 are all set in PT Sans.

Headings

Post Titles (h1)

# Post Title (h1)
font-family: Myriad Pro

Subpage Title (h2)

## Subpage Title (h2)
font-family: PT Sans

Section Header (h3)

### Section Header (h3)
font-family: PT Sans

Subsection Header (h4)

#### Subsection Header (h4)
font-family: PT Sans


Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet sed magna et sodales. Vestibulum vehicula dolor sit amet luctus viverra. Praesent facilisis dictum sapien, et elementum lorem imperdiet pulvinar. Nulla lacinia, arcu eget venenatis dapibus, neque tellus vestibulum elit, tempor condimentum turpis elit a justo.

{font-family: "source-sans-pro";
color: #393939;
font-size: 22px;
font-weight: 300;
line-height: 35.2px;}

Paragraph Lead Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet sed magna et sodales. Vestibulum vehicula dolor sit amet luctus viverra. Praesent facilisis dictum sapien, et elementum lorem imperdiet pulvinar.

<span class="lead">Lead Text</span>

Italics

Italics can be used for emphasis.

*Italics*

Bold

Bold text can be used for stronger emphasis.

**Bold text**

Abbreviations

Abbreviations, like AWOL should use <abbr>, with an optional title attribute for the full phrase.

<abbr title="absent without leave">AWOL</abbr>

Citations

Citations, like — Mark Mitchell, should use <cite>.

<cite>&mdash; Mark Mitchell</cite>

Deleted Text

Deleted text should use <del>.

<del>Deleted</del>

Inserted Text

Inserted text should use <ins>.

<ins>Inserted</ins>

Superscript Text

Superscript text uses <sup>.

Superscript <sup>text</sup>

Subscript Text

Subscript text uses <sub>.

Subscript <sub>text</sub>


Code Stlyes

Code markup is automatically applied by the Markdown parser as long as the correct code type is added. Styles are handled by Pygments via the syntax.css stylesheet.

Inline

Inline code has (back-ticks) around it.

`code`

Markdown

### H3 Example

CSS

.brand-green {color: #67a43e}

HTML

<h2 class="brand-green">Post Subtitle</h2>


Lists

There are four lists styles supported. Unordered lists, ordered lists, mixed lists, and definition lists. All lists can be written in Markdown except for definition lists, they are written in HTML.

Unordered Lists

  • Praesent commodo cursus magna, vel scelerisque consectetur et.
  • Donec id elit non mi porta gravida at eget metus.
  • Nulla vitae elit libero, a pharetra augue.
* Praesent commodo cursus magna, vel scelerisque consectetur et.
* Donec id elit non mi porta gravida at eget metus.
* Nulla vitae elit libero, a pharetra augue.

Ordered Lists

  1. Praesent commodo cursus magna, vel scelerisque consectetur et.
  2. Donec id elit non mi porta gravida at eget metus.
  3. Nulla vitae elit libero, a pharetra augue.
1. Praesent commodo cursus magna, vel scelerisque consectetur et.
2. Donec id elit non mi porta gravida at eget metus.
3. Nulla vitae elit libero, a pharetra augue.

Mixed Lists

  1. Praesent commodo cursus magna, vel scelerisque consectetur et.
    • Mixed Item One
    • Mixed Item Two
  2. Donec id elit non mi porta gravida at eget metus.
1. Praesent commodo cursus magna, vel scelerisque consectetur et.
   * Mixed Item One
   * Mixed Item Two
2. Donec id elit non mi porta gravida at eget metus.

Definition Lists

Aluminum
Aluminium or aluminum is a chemical element with symbol Al and atomic number 13. It is a silvery-white, soft, nonmagnetic and ductile metal in the boron group.
Brass
Brass is a metallic alloy that is made of copper and zinc. The proportions of zinc and copper can vary to create different types of brass alloys with varying mechanical and electrical properties.
Copper
Copper is a chemical element with symbol Cu (from Latin: cuprum) and atomic number 29. It is a soft, malleable, and ductile metal with very high thermal and electrical conductivity.
<dl>
  <dt>Aluminum</dt>
  <dd>Aluminium or aluminum is a chemical element with symbol Al and atomic number 13. It is a silvery-white, soft, nonmagnetic and ductile metal in the boron group.</dd>

  <dt>Brass</dt>
  <dd>Brass is a metallic alloy that is made of copper and zinc. The proportions of zinc and copper can vary to create different types of brass alloys with varying mechanical and electrical properties.</dd>

  <dt>Copper</dt>
  <dd>Copper is a chemical element with symbol Cu (from Latin: cuprum) and atomic number 29. It is a soft, malleable, and ductile metal with very high thermal and electrical conductivity.</dd>
</dl>


Tables

Tables used are fairly simple, nothing too tricky.

Standard Left Aligned

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
| Company | Contact | Country |
| --- | --- | --- |
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |

Mixed Alignment

Company Contact Country
Left Aligned Center Aligned Right Aligned
Centro Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
| Company | Contact | Country |
| --- | :---: | ---: |
| Left Aligned | Center Aligned | Right Aligned |
| Centro Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |


Links will look like this, nice and simple.

[Linked Text](http://url.com)


Image Sizing and Formatting

Images can be sized using this Sketch template. There’s no secret to the sizing, but it will ensure consistency. There’s four sizes, you should consider the final display size as a percentage of the full-body width i.e., 25% of the content container.

The width is set by adding a class .width-25, .width-50, .width-75 or .width-100. Images are 100% wide by default so adding a width class isn’t necessary. On small (mobile sized) screens all images are 100% wide by default.

All image filetypes are acceptable, but care should be taken to ensure the appropriate types are being used. .jpg should be used for photos and .png should be used for design assets (like logos).

Cloudinary will serve the smallest filetype and size automatically as long as the .cld-responsive class is added.

25% Width

Image 25% Wide

![Alt Text](img/url){: .cld-responsive .width-25}

50% Width

Image 50% Wide

![Alt Text](img/url){: .cld-responsive .width-50}

75% Width

Image 75% Wide

![Alt Text](img/url){: .cld-responsive .width-75}

100% Width

Image 100% Wide

![Alt Text](img/url){: .cld-responsive .width-100}
Note: 100% width is default so adding this class won't be needed in most cases.

25% Width (Float Left)

Image 25% Wide Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet sed magna et sodales. Vestibulum vehicula dolor sit amet luctus viverra. Praesent facilisis dictum sapien, et elementum lorem imperdiet pulvinar. Nulla lacinia, arcu eget venenatis dapibus, neque tellus vestibulum elit, tempor condimentum turpis elit a justo.

![Alt Text](img/url){: .cld-responsive .width-25 .float-left}

25% Width (Float Right)

Image 25% Wide Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet sed magna et sodales. Vestibulum vehicula dolor sit amet luctus viverra. Praesent facilisis dictum sapien, et elementum lorem imperdiet pulvinar. Nulla lacinia, arcu eget venenatis dapibus, neque tellus vestibulum elit, tempor condimentum turpis elit a justo.

![Alt Text](img/url){: .cld-responsive .width-25 .float-right}

50% Width (Float Left)

Image 50% Wide Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet sed magna et sodales. Vestibulum vehicula dolor sit amet luctus viverra. Praesent facilisis dictum sapien, et elementum lorem imperdiet pulvinar. Nulla lacinia, arcu eget venenatis dapibus, neque tellus vestibulum elit, tempor condimentum turpis elit a justo.

![Alt Text](img/url){: .cld-responsive .width-50 .float-left}

75% Width (Float Left)

Image 75% Wide Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet sed magna et sodales. Vestibulum vehicula dolor sit amet luctus viverra. Praesent facilisis dictum sapien, et elementum lorem imperdiet pulvinar. Nulla lacinia, arcu eget venenatis dapibus, neque tellus vestibulum elit, tempor condimentum turpis elit a justo.

![Alt Text](img/url){: .cld-responsive .width-75 .float-left}

Linked Image

Linked Image

[![Linked Image](https://res.cloudinary.com/dbrkuvff5/image/upload/f_auto,q_auto/v1533119534/post-images/post-image-sample-100.png){: .cld-responsive}](http://www.example.com/ "Example Title")

Cloudinary URLs

Cloudinary is used for all image and asset hosting. Use the code below to automatically build the URLs and add the .cld-responsive class.

![Alt Text](https://res.cloudinary.com/dbrkuvff5/image/upload/f_auto,q_auto/[file_number]/[folder_name]/[file_name]){: .cld-responsive}


Horizontal Rules and Dividers

In most cases dividing lines will be added by default as part of the design. In scenarios where you’d like to add a divider manually, there’s two ways to do it.

The first is to add class .divider. This should be used to add a divider to an HTML element.

h3 With a Divider

Image With a Divider

Image 100% Wide

### h3 With a Divider
{: .divider}

In circumstances when there isn’t an element to add the divider class to, simply generate a <hr> using Markdown.


---


Message Styles

Messages can be used to call special attention to important content. Messages should not be longer than one or two short sentences.

To create a message, add .message to a paragraph. This defines the default style. To create a secondary, success, alert, or danger message add that as a second class. This concept is loosely based on how Bootstrap styles alerts.

Default Message

This is a default message.

{: .message}

Secondary Message

This is a secondary message.

{: .message .message-secondary}

Success Message

This is a success message.

{: .message .message-success}

Alert Message

This is an alert message.

{: .message .message-alert}

Danger Message

This is a danger message.

{: .message .message-danger}

Blockquotes

“This is quoted text”

> "This is quoted text"

Mark Mitchell

About Mark Mitchell

I started in the music business in New York City. Today, I'm Managing Director of Product at a world leading Financial Services company leading a team of 150 Product Managers. I live in Atlanta with my wonderful wife and our three children. Like many Product Managers, I too traveled an unusual path to get here. Here’s the full scoop.

I’d like to hear from you. Feel free to send me a note, or let's connect on Twitter or LinkedIn.