Sections

Take control of your site with sections; little packages of wholesome goodness whose code only executes on the pages they are used on

Section Docs →

With the boxes section you can build just about anything, whether it be a mock-up of a medieval war, or your next museum in a far off land called Joo Joo Bee.

  • Can be organized into sets
  • Has multiple image/text layout options
  • Complete control over columns

Box Docs →

Image on Top

Image on Top

This is a box with a bigger image. Can you guess how big the image is without Google searching?
Image on Top

Image on Top

This is a box with a bigger image. Can you guess how big the image is without Google searching?
Image on Top

Image on Top

This is a box with a bigger image. Can you guess how big the image is without Google searching?

Shout it out, sell it, stock it, whatever you want. The banners section can easily get that message across and can be setup in less than negative 7 minutes.

  • Like boxes, can be organized into sets
  • Options for left/right placement and padding
  • Add your own class and style it with sweetness

Banner Docs →

This is the ultimate in attention getting, date having, lip smacking unicorn goodness. Get your point across, and get your visitors on their way quickly.

  • Ginormous heading and tagline combo-rooni
  • Options to display menu, and multi-color action buttons
  • Display optional blocks of text or code

Masthead Docs →

Masthead Section

with options for menu, meta, and multi-color action buttons

Alpha Beta


Get your little friends and let's go for a ride on the Carousel section. Display posts, images from Flickr, or those embarrassing moments last year in Vegas that you thought remained quite.

  • Multiple display options for posts, galleries, and more
  • Full control over thumb total and number shown
  • Options to control transition elements

Carousel Docs →

Sometimes you just want to have a quick one, and not have to worry about being attached to anything. So with the Quickslider you can have a sliding section in only -235 seconds.

  • Options for transition types
  • Multiple animation options
  • Specify number of slides and optional links

Quickslider Docs →

For those moments when you want to feature something amazing, or perhaps have a few options on how to display the feature. Unicorns are ripe with options.

  • Display images, or video
  • Options for caption placement and display
  • Specify one of over 20 transition types

Features Docs →

Basic Use

Drag Scroll Spy into a Page Template in Drag & Drop, position it above the content section, then use simple markup to trigger the section.

  <h4 class="scroll-header" title="Setup"></h4>
    <p>Your content here</p>
  <h4 class="scroll-header" title="Usage"></h4>
    <p>Your content here</p>
Explanation

.scroll-header is the class that triggers the scrolling. The class can be added to any element, and is not restricted to headings.

The attribute title="Usage" is used as the actual label that sits inside the menu.

Add a Styled Heading

Wrap the markup in a div, add a few special classes, and you'll instantly have a styled page heading your mom would be proud of.

  <div class="scroll-header page-header" title="Setup">
    <h4>Scroll Spy Setup <small>add some magical unicorn classes and watch for spies</small></h4>
  </div>
  <p>Your content here</p>
  <div class="page-header">
    <h4>Advanced Usage </h4>
  </div>
  <p>Your content here</p>
Explanation

.page-header is the class that makes the heading and subheading look great.

For those moments when you want to feature something amazing, or perhaps have a few options on how to display the feature. Unicorns are ripe with options.

  • Great when used to top a page with whip cream goodness
  • Optional multi-color action button
  • Fully responsive and ripe for the pickin'

Hero Unit Docs →

Hero Unit

This is a tagline for the Hero. You can have some text here, then when you're done you can have an image, and a multi-color action button. Wicked.

Action Button

Be a real pal and save time generating gradients and hexcode tomfoolery. White background, cool colored navbar, done. Like woah.

  • Fully responsive and collapsible menu
  • Optionally display search field
  • Choose from one of 5 yummy flavors

Navigation Bar Docs →

Twitter Bar

Display your latest tweets for those 5 friends of yours

Highlight Section

Makes for a great introduction to a page or separating sections

Content Box

Show anything in this like raw html and pepper corns.

Callout

A simple tagline with multi-color action button

BrandNav

A different layout to show a logo and navigation

Branding

Show 'em whose boss with a logo like a hoss

Secondary Nav

For displaying secondary navigation menus

Footer Columns

Show multiple widgets in the footer

Get PageLines Framework Now →