The style guide provides you with a blueprint of Pocket’s default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.
Typography Treatment
Pocket pays special attention to typography and type treatment, which really underscores and compliments your content across all devices.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Blockquote
The blockquote is used to indicate the quotation of a large section of text from another source.
Those of us that had been up all night were in no mood for coffee and donuts, we wanted strong drink. We were, after all, the absolute cream of the national sporting press.
Mixed List Items
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Ordered list item three
- Unordered list item three
- Ordered list item three
- Unordered list item three
Code Formatting
pre {
position: relative;
background: #f7f7f7;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
margin-bottom: 1.6em;
padding: 1.6em;
overflow: auto;
max-width: 100%;
tab-size: 4;
}
Table Styles
| Beatle | Instrument | Song |
|---|---|---|
| John Lennon | Guitar | A Day In the Life |
| George Harrison | Guitar | Old Brown Shoe |
| Paul McCartney | Bass | Helter Skelter |
| Ringo Starr | Drums | Don’t Pass Me By |
Highlight Text Style
To use the highlight, you simply need to add a span with the class highlight. This can be done in the Text editor view. See an example below:
<span class="highlight">This will be highlighted.</span>
Intro Text Style
The intro text style is great for introducing your post with a brief excerpt (example). To use the intro text style, you simply need to add a span tag with the class intro. This can be done in the Text editor view. See an example below:
<span class="intro">This text will be capitalized and centered below your post title.</span>
Pull Quote Styles
To use the pull quote, you simply need to add a class of pull-right or pull-left to your content. This can be done in the Text editor view. See an example below:
<span class="pull-right">Pull this text right.</span>
This pull quote is just hanging out on the right side of the post.
A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.
Placement of a pull quote on a page may be defined in a publication’s or website’s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown.
And this pull quote is pulling text to the left, like a sir.
Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication’s house style pull quotes may be abbreviated for space and/or paraphrased for clarity, with or without indication.
Publishing is the process of production and dissemination of literature, music, or information — the activity of making information available to the general public. In some cases, authors may be their own publishers, meaning: originators and developers of content also provide media to deliver and display the content for the same. Also, the word publisher can refer to the individual who leads a publishing company or imprint or to a person who owns a magazine.
Image Styles
This is a full-width image.
Right Aligned Image
Images may be two-dimensional, such as a photograph, screen display, and as well as a three-dimensional, such as a statue or hologram. They may be captured by optical devices – such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.
Left Aligned Image
The word image is also used in the broader sense of any two-dimensional figure such as a map, a graph, a pie chart, or an abstract painting. In this wider sense, images can also be rendered manually, such as by drawing, painting, carving, rendered automatically by printing or computer graphics technology.
Image Gallery w/ Carousel
This is a traditional WordPress thumbnail gallery available in all WordPress sites. To add this gallery, simply click Add Media in your post editor and click Create Gallery. In the Gallery Settings area, choose Thumbnail Grid as the type of gallery.
Mosaic Image Gallery w/ Carousel
To add an awesome mosaic image gallery, simply click Add Media in your post editor and click Create Gallery, and choose the images you’d like in your mosaic. Next, in the Gallery Settings area, choose Tiled Mosaic as the type of gallery.
