Style guide - Parsley Health
Svg Vector Icons : http://www.onlinewebfonts.com/icon icon_line_graph_m Created with Sketch. icon_rings_m Created with Sketch. icon_smartphone_m Created with Sketch. icon_smartphone_monline Created with Sketch. icon_fl_m Created with Sketch. icon_smartphone_monline Created with Sketch. icon_sf_m Created with Sketch. Store

CMS style guide

<h2>

This is heading 2

<h3>

This is heading 3

<h4>

This is heading 4

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

<ul>
  • Et harum quidem rerum facilis est et expedita distinctio
  • Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
  • Itaque earum rerum hic tenetur a sapiente delectus
<ol>
  1. Et harum quidem rerum facilis est et expedita distinctio
  2. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
  3. Itaque earum rerum hic tenetur a sapiente delectus
<a>

This is a link

<strong>

This is some bolded text.

<em>

This is some italicized text.

<h2>

This is heading 2

<h3> or <h4>

This is heading 3

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

<ul>
  • Et harum quidem rerum facilis est et expedita distinctio
  • Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
  • Itaque earum rerum hic tenetur a sapiente delectus
<ol>
  1. Et harum quidem rerum facilis est et expedita distinctio
  2. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
  3. Itaque earum rerum hic tenetur a sapiente delectus
<blockquote>
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<a>

This is a link

<strong>

This is some bolded text.

<em>

This is some italicized text.

Module nameShortcodeExample
Inline Simple Cta
[parsley_inline_simple_cta heading="Put your main text here" button_text="Join now" action="/join"]

Put your main text here

Inline Optin
[parsley_inline_optin id="39650"]
[Optin with id 39650 not found]
Inline Join
[parsley_inline_join heading="Join now for the best thing ever."]

Join now for the best thing ever.

Inline Product
[parsley_inline_product product_id="2495" heading="Buy your great product!"]

Buy your great product!

Shop now
Quotation, from our staff
[parsley_quotation quote="Insert your quote text here" by_staff="37910"]

Insert your quote text here
Quotation, non-staff
[parsley_quotation quote="Insert your quote text here" name="John Smith" location="Austin Texas" quotee_image="38646" link="http://blahhh.com"]

Insert your quote text here
<span title="This is a tooltip!">tooltip</span>

An example of a tooltip.

<div class="figure-list">
  <div>
    <h5>200+</h5>
    <h6>Minutes per year</h6>
  </div>
  <div>
    <h5>100x</h5>
    <h6>Biomarkes assessed</h6>
  </div>
</div>
                
200+
Minutes per year
100x
Biomarkes assessed
<a class="button-full" href="mylink.com">Click me</a>
                
Click me
<a class="button-light" href="mylink.com">Click me</a>
                
Click me
<a class="button-outline" href="mylink.com">Click me</a>
                
Click me
<a class="button-link" href="mylink.com">Click me</a>
                
Click me
<a href="#schedule-call">Schedule free call</a>
                

Schedule free call

<a href="#book-tour">Open house</a>
                

Open house

<a href="#newsletter-popup">Join newsletter</a>
                

Join newsletter