Page Elements

Page Elements

Blockquotes

Multi line blockquote

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Show Example Code


HTML Markup:
[blockquote] It is a long established fact………. [/blockquote]

Single line blockquote

Stay hungry. my friends.

Show Example Code


HTML Markup:
[blockquote] Stay hungry. my friends. [/blockquote]

Multi line blockquote with a cite reference

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.
Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Show Example Code


[blockquote] People think focus means saying………. [/blockquote]
Add a cite declaration EG: <cite> Steve Jobs – Apple Worldwide Developers’ Conference, 1997 </cite>
*The cite should be before the closing [/blockquote]

Callout Boxes

Graybox Shortcode

Column A
ColumnB

Show Example Code


HTML Markup:
[graybox] Column A [/graybox]

Graybox Fullwidth

Graybox Full

Show Example Code


HTML Markup:
[gray-full-box] Column A [/gray-full-box]

Rounded Top Corners Shortcode

They should show at the very top of the blog index page, even though they could be several posts back chronologically.
They should still show up again in their chronologically correct postion in time, but without the sticky indicator.

Show Example Code

HTML Markup:

[rounded-top-corners]They should show at the very top of the blog index page, even though they could be several posts back chronologically. [/rounded-top-corners]

Horizontal Rule · Divider

Dividerline Shortcode

 

Show Example Code


HTML Markup:
[dividerline] [/dividerline]

Alternate Dividerline Shortcode

Show Example Code


HTML Markup:
<div class=”divider_lines”></div>

Styled Boxes

This is an Information Message! – Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text.

This is a Success Message! – Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text.

This is a Notice Message! – Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text.

This is an Error Message! – Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text.

Buttons

Small Button Small Button Small Button Small Button Small Button Small Button Small Button

Medium Button Medium Button Medium Button Medium Button Medium Button Medium Button Medium Button

Large Button Large Button Large Button Large Button Large Button Large Button Large Button

Sample button use like this