Elements


Example Pages


Default Page

Description: Basic page template for basic content. Includes options to show/hide sidebar callouts per page.

Services Template

Description: Basic page template for basic content with services feed at the bottom of template and options to show/hide sidebar callouts per page.

Market Template

Description: Includes Page Title with Icon, full-width featured image in page, flexible content box areas for styling page, services feed at the bottom of template and options to show/hide sidebar callouts per page.
Flexible content regions included:

  • Basic content region with WYSIWYG Editor
  • One Column Panel with title, content, and up to 2 sub-column list panels
  • Two Column Panel with title, content, and list panels for each panel
  • Stripe Column Panel with option to add 1 or 2 columns each with a rows containg a title & subtitle, content, and list panels
  • Contact Banner with text region, button/link.

Full-Width Template

Description: A full-width page (no sidebar) with a banner that includes an image and a title. Page content features primary and secondary striped callout panels with titles that include an icon selector. A full-width contact banner is featured in the footer of the content region.


Shortcodes


Email Encode

Shortcode: [email url="email@address.com"]My Email[/email] or [email]email@address.com[/email]

Directions: The url is optional. If not used, the content between the shortcode will be used as the email address. This shortcode also encodes the e-mail address to help prevent spam caused by web bots.

Output: My Email or email@address.com

 


Buttons

Shortcode: [button class="btn btn-default" url="" target=""][/button]

Directions:
Color Classes: btn-default / btn-primary / btn-secondary
Size Classes: btn-extra-large / btn-large / btn-medium / btn-small / btn-extra-small

Output: Button

 


Grid Wrap / Grids

Shortcode: [grid-wrap][grid class="grid-20 grid-sm-100"][/grid][/grid-wrap]

Directions: Use class=”grid-‘size’” to set widths of columns.
Sizes are set in multiples of 5’s and 10’s i.e.: grid-10, grid-20, grid-25, etc.
To change the sizes of grids on smaller screen sizes use:

grid-‘size’ (1280px +)
grid-md-‘size’ (768px – 1279px)
grid-sm-‘size’ (480px – 767px)
grid-xs-‘size’ (320px – 479px)

Note* Always wrap these columns in a grid-wrap to keep them contained together using the shortcode [grid-wrap][/grid-wrap]

Output:

 


Callout Banner

Shortcode: [banner button="Contact Us" url="#url" target="_self"]Learn more about how Pacific Bridge Medical can help.[/banner]
Directions: The button parameter sets the label for the callout button. The button label and url parameters must be set for the button to work properly. The target parameter is optional and can accept “_blank” or “_new” to open the link in a new tab or new window.
Output:

Learn more about how Pacific Bridge Medical can help.

 


Media Banner

Shortcode: [media-panel image_src="/wp-content/uploads/2015/03/img-02.png" play_icon="true" video_url"#url" target="_self"][/media-panel]
Directions: The media banner takes the required parameters “image_src” and “video_url” and the optional parameters “play_icon” and “target”. The “image_src” parameter accepts relative and static links to an image which will be output in the right column of the panel. The “video_url” parameter accepts a relative or static url to link the image to another page. The “target” parameter can be used to open that link in a new window and then “play_icon” parameter will overlay a play icon on the image to indicate that it is linking to a video. Content goes in between the tags and will be output in the left column. Images can also be output in the left column by inserting it between the banner tags.
Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget lorem ac nisl porta volutpat. Vivamus egestas ullamcorper euismod.signature-01

 


Panel

Shortcode: [panel background="true"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget lorem ac nisl porta volutpat.[/panel]
Directions: The panel shortcode is used to wrap content in an area with a dividing line applied to the top and an optional grey background. The grey background is applied by setting the “background” parameter to true. The panel shortcode can be used effectively with the grid shortcodes to create column based layouts.
Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget lorem ac nisl porta volutpat.

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit
  • Phasellus eget lorem
  • ac nisl porta volutpat

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit
  • Phasellus eget lorem
  • ac nisl porta volutpat

 


Stripe Panel

Shortcode: [stripe-panel]

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit.
  • Phasellus eget lorem
  • ac nisl porta volutpat.[/stripe-panel]

Directions:  Striped panels are used around list items to apply stylized alternate rows. These panels can also be used in conjunction with grids to create column based layouts.
Output:

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit.
  • Phasellus eget lorem
  • ac nisl porta volutpat.

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit.
  • Phasellus eget lorem
  • ac nisl porta volutpat.

 


Quote

Shortcode: [quote class="" quote_source="Quote Source" url="#url" target="_self"][/quote]

Directions: Use the quote_source parameter to set a citation source. Using the url parameter will link the quote source. The class parameter is an optional parameter which can be used for custom styles.

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis dignissim mauris, et euismod risus vehicula sed.

Quote Source

 


Blockquote

Shortcode: [blockquote class=""][/blockquote]

Directions: The class parameter is an optional parameter which can be used for custom styles.

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis dignissim mauris, et euismod risus vehicula sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

 


Accordion / Accordion Item

Shortcode: [accordion class=""][accordion-item title=""][/accordion-item][accordion-item title=""][/accordion-item][/accordion]

Direction: The class parameter is an optional parameter which can be used for custom styles.

Output:

Accordion Item #1

Item #1 Content

Accordion Item #2

Item #2 Content

 


Responsive Table

Shortcode: [table]<table><tr><td></td</tr></table>[/table]

Directions: Use this shortcode to wrap any table to make it’s width fluid and includes a horizontal scroll-bar on smaller screens.

Output:

Table Caption
Table Header
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data


 

YouTube Embed

Shortcode: [youtube]]https://www.youtube.com/watch?v=Q7ucIberDoU[[/youtube]

Directions: Use this shortcode to properly embed YouTube videos that correctly resize for mobile breakpoints.

Output:


Post Type Count

Shortcode: [count_posts]]regulation[[/count_posts]

Directions: Use this shortcode to display the number of published posts for a given post type.

Post Types:

  • post – Blog Posts
  • page – Content Pages
  • regulation – Regulations
  • presentation – Presentation Slides
  • publication – Publications
  • infographic – Infographics / Regulatory Charts
  • news_brief – News Briefs
  • research_report – Research Reports
  • webcast – Webcasts

Output: 223


General Styles

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.


Lead Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.


  • Unordered list item
  • Unordered list item
  • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
    1. Ordered list item 1
    2. Ordered list item 2
    3. Ordered list item 3
  4. Ordered list item 1
  5. Ordered list item 1
  6. Ordered list item 2

Definition list title
Definition list division 1
Definition list division 2
Definition list division 3

“Blockquote Maecenas tristique, dui vel ultricies mattis, nibh velit cursus ex, augue enim massa.”


“Maecenas tristique, dui vel ultricies mattis, nibh velit cursus ex, non fringilla augue enim sed massa. Donec eget est sagittis, tempus nibh quis.” John Doe


Button Default


Button Primary


Button Secondary


Button Default


Button Primary


Button Secondary


Button Default


Button Primary


Button Secondary


Button Default


Button Primary


Button Secondary


Button Default


Button Primary


Button Secondary


Panel Title

Panel Content

Panel Footer

Accordion Title 1

Accordion Content 1

Accordion Title 2

Accordion Content 2

Accordion Title 3

Accordion Content 3


Tab Content 1

Tab Content 2

Tab Content 3

Tab Content 4

Tab Content 5


Table Caption
Table Header
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Caption
Table Header Table Data Table Data Table Data
Table Header Table Data Table Data Table Data
Table Header Table Data Table Data Table Data
Table Caption
Table Header Table Header Table Header
Table Header Table Data Table Data Table Data
Table Header Table Data Table Data Table Data
Table Header Table Data Table Data Table Data

Image Caption

Image Caption

Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.

Image Caption

Image Caption

Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.

Image Caption

Image Caption

Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.

 







Default Form




Your email address will not be published. Required fields are marked *






img-placeholder-160x160
Image
Image

Image
Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.


Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Image

To learn more about how Pacific Bridge Medical can help you develop a successful business strategy in Asia for your pharmaceutical product, contact us for a free consultation with our Asia business consultants.