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

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. Button Text

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:

  1. Item One
  2. Item Two
  3. Item Three
  4. 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

Summer Hours

  • Monday: 10:00 am—6:00 pm
  • Tuesday: CLOSED
  • Wednesday: 10:00 am—6:00 pm
  • Thursday: 10:00 am—6:00 pm
  • Friday: 10:00 am—6:00 pm
  • Saturday: 10:00 am—6:00 pm
  • Sunday: 10:00 am—6:00 pm

Admission Prices

  • Adult: $21.95
  • Senior (65+): $18.25
  • Student: $17.25
  • Youth (6-17): $15.95
  • Child (5 and under): Free
Hours & Admission

Tours

10:15am, 11:15am, 12:15pm, 2:15pm (Wednesday-Monday)

LEARN MORE

SHUTTLE

Available by request

SHUTTLE INFORMATION

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

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 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

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 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

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.

This is a thumbnail left aligned image.

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. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

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.

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.

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) :

Photo by Bruce Forster 

Full Width Photo (No Alignment) / by Credit

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é

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

Photo by Bruce Forster

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

Photo by Bruce Forster

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

Lower Page Modules Below: