Style Guide

生ぴゆス派

This is a private page, which means it can only be viewed on the front-end website by users that are logged into WordPress as an admin. This page exists to display various style examples of text, global styles and media, and/or content modules on the site. You can see what they look like on this page on the front-end, and look at the back-end WordPress to see how they were entered and are managed.

Headings: This is Heading 1 Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is an example of bold text. Nullam consequat interdum finibus. Maecenas gravida ut ante a dictum. Maecenas ut luctus odio, a eleifend nisi. Sed quis lobortis dolor. Mauris pellentesque ex quis example of emphasis (italics) nibh sagittis, in efficitur nulla malesuada. Etiam gravida tincidunt placerat. Praesent egestas et massa facilisis porta. Vivamus at est tincidunt, faucibus metus quis, this is a hyperlink.

Heading 2 Example

The above is a heading selection that can be selected from the WYSIWYG toolbar dropdown.

Heading 3 Example

The above is a heading selection that can be selected from the WYSIWYG toolbar dropdown.

Heading 4 Example

The above is a heading selection that can be selected from the WYSIWYG toolbar dropdown. Headings 5-6 follow the same styles as Header 4.

Heading with a hyperlink

Nullam consequat interdum finibus. Maecenas gravida ut ante a dictum. Maecenas ut luctus odio, a eleifend nisi. Sed quis lobortis dolor. Mauris pellentesque ex quis example of emphasis (italics) nibh sagittis, in efficitur nulla malesuada. Etiam gravida tincidunt placerat. Praesent egestas et massa facilisis porta.

International Fonts

This is English Text. This is English Text. Here is Japanese characters NOT in Noto Sans, without any font class applied: 時モラセ質生ぴゆス派2那シキヲロ高総シウ雪必

And now for some Japanese characters that IS in Noto Sans: 時モラセ質生ぴゆス派2那シキヲロ高総シウ雪必. And now back to English text again.

And now for some Japanese Characters in the Kinryo font for Kanji: ≈生ぴゆス派2那シキヲロ高総シウ雪必. This font will appear as Noto Sans on mobile. And now back to English text again.

Below is a horizontal line. It can be entered via the WYSIWYG toolbar.

Buttons

Purchase Event Tickets

This paragraph has a line break after it before the button, which you can create in the WYSIWYG by pressing SHIFT-RETURN. This keeps the button within the paragraph tags but adds a line break at the end of the paragraph. If the paragraph you’re writing is describing or leading into this button, like “download this PDF,” you may want to use this button space version.
Download Now

This paragraph has a paragraph break after it before the button, which you can create in the WYSIWYG by pressing just RETURN. This puts the button within a paragraph tag. You can tell the difference visually w/in the WYSIWYG because there’s some vertical space between this paragraph and the button. You may want to use this version if the button is off-site or more separate from content, for example if it was a paragraph about member benefits and the below button was a link off to Bamboo Sushi.

On-Site Destination

List and Table Styles

This is a bulleted list example:

List item one
List item two
List item three
List item four

This is a numbered list example:

Item One
Item Two
Item Three
Item Four

Type	Price	Benefits
Individual / Senior Membership	$55	One membership card Full tax-deductible Seniors (65+) receive two additional one-time use complimentary tickets; five with a two-year Membership	Purchase Membership
Dual Membership	$75	Two membership cards Fully tax-deductible	Purchase Membership
Household / Family Membership	$95	Two membership cards Children under eighteen are free Fully tax-deductible	Purchase Membership

Visitor Info Widget Shortcode

PullQuote (BlockQuote) Examples

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Here is a blockquote, aligned to the right
– With Attribution

Here is a longer blockquote. Here is a longer blockquote. Here is a longer blockquote. It is left aligned.
– Quote Attribute

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

This is a center-aligned blockquote with attribution.
– Quote Attribute

This is a blockquote that was added via the WYSIWYG toolbar button. It will be center-aligned and follow the pull quote style, but any attribution will not follow the special attribution style.

–Attribution

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Inline Images & Galleries

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Right aligned “medium” image with hyperlink

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Large, centered image (stays column width) :

Full Width Photo (No Alignment) / by Credit

Video

Embedded Instagram Feeds

Regular Instagram Feed (PJG Account)

Follow on Instagram

Instagram Feed of PJG with #winter hashtag and 6 photos

Follow on Instagram

Instagram Feed of photos from the location: Portland Japanese Garden

Instagram Feed of photos located 1000 meters from the Latitude/Longitude: 45.518621,-122.708046

Generic CTA (Module + Shortcode)

Try our new Menu in the Umami Tea Café

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl massa, tempor sed tempor vel, consequat ut est. Mauris felis lacus, dignissim nec lacus non, pulvinar molestie quam. Sed non augue in velit dignissim fermentum. In pulvinar justo ac mi consequat gravida. Fusce at velit nec metus volutpat auctor.

Sponsor Grid (Module + Shortcode)

Accordion Function

Testing the Accordion Function

$1,000

Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Purchase Membership

Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.

View test content

Test Row #2

Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.

Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.

Bidou Yamaguchi Discusses his Pieces in the Tanabe Gallery

Illustration Courtesy of Kurisu International

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.

View

Headings: This is Heading 1 Style

Heading 2 Example

Heading 3 Example

Heading 4 Example

Heading with a hyperlink

International Fonts

Buttons

List and Table Styles

Type

Price

Benefits

Individual / Senior Membership

$55

Dual Membership

$75

Household / Family Membership

$95

Visitor Info Widget Shortcode

PullQuote (BlockQuote) Examples

Inline Images & Galleries

Video

Embedded Instagram Feeds

Regular Instagram Feed (PJG Account)

Instagram Feed of PJG with #winter hashtag and 6 photos

Instagram Feed of photos from the location: Portland Japanese Garden

Instagram Feed of photos located 1000 meters from the Latitude/Longitude: 45.518621,-122.708046

Generic CTA (Module + Shortcode)

Try our new Menu in the Umami Tea Café

Sponsor Grid (Module + Shortcode)

Sponsorships: one logo per row

Sponsorships: one logo and a white spacer in the righthand spot

Sponsorships: two logos per row

Sponsorships: three logos per row

Sponsorships: two logos and a white spacer in the third slot

Accordion Function

Testing the Accordion Function

$1,000

Test Row #2

Lower Page Modules Below:

The Portland Japanese Garden on Instagram

Please be considerate of the Garden and of the Garden experience for all visitors.