This is an H2 tag

This is an H3 tag

This is an H4 tag

This is an example page. This is a block quote.

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

This is an ordered list with the class ‘Pink Numbers’, selectable from the formats dropdown:

  1. List item
  2. Another list item
  3. Third list item

This is an unordered list with the class ‘Pink Dots’, selectable from the formats dropdown:

  • List item
    • Child lists have normal styles
  • Another list item
  • Third list item

This is a message. You make a message by writing your text, then highlighting it and selecting Message Box from the formats dropdown list.

You can have multiple paragraphs in the boxes, and other things.

Like a heading

Or a list:

  • List item
  • Another list item
  • Third list item

This is a notice. You make a notice by writing your text, then highlighting it and selecting Notice Box from the formats dropdown list.

This is an alert. You make an alert by writing your text, then highlighting it and selecting Alert Box from the formats dropdown list.

Trigger boxes

Toggle This

Toggles are created by:

  • Putting the open link (href=”#”) in a paragraph or heading with the class ‘trigger’
  • Putting the content you want to slide open into a div with the class ‘trigger-container’
  • Giving both of the above the same ID
  • Wrapping the whole thing in a div with the class ‘trigger-wrapper’ – for proper spacing. If both trigger boxes are adjacent, wrap both in this. If there are triggers and containers in separate locations on the page, wrap each set separately.
  • You can have multiple toggles on a page, but the trigger and trigger container it opens must have the same id.
  • You can put any HTML you like in the container div

Toggle That

This is another toggle container.

Opening it will not close the first one.

Accordion

Heading One

Accordions are created by:

  • Putting the heading in a paragraph with the class ‘accordion-header’
  • Putting the content you want to slide open into a div with the class ‘accordion-content’
  • Wrapping the whole thing in a div with the ID ‘accordion-container’ – for proper spacing
  • You can put any HTML you like in the content div

Heading Two

This is the content of the second accordion container.

Opening will cause the first container to close.