Categories

More information

Huggle Style Guide

This page is a reference for many of the design elements that make up the Huggle website. For any enquiries regarding the design and build of this site please contact GPMD.

Colours

 

Cyan

RGB 0/175/239

 

Magenta

RGB 236/0/140

 

Lime

RGB 212/222/37

 

Orange

RGB 255/85/0

 

Yellow

RGB 255/203/10

Typography

h1. This is a large heading

h2. This is a medium heading

h3. This is a small heading

 

Section heading

This is some standard text. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius this is some bold text. Maecenas this is a hyperlink sed diam sit amet non magna. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo aenean. Nullam id dolor id nibh ultricies vehicula ut id elit.

Panels

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

This is an info panel cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

Navigation

See main navigation above...

Breadcrumbs

Link Lists

Buttons

Forms

Contact Us

Contact Information

* Required Fields

Tables

Row one heading Row one information...
Row two heading Row two information...
Row three heading Row three information...
Row four heading Row four information...
Row five heading Row five information...
Col one headingCol two headingCol three headingCol four headingCol five heading
Col one information... Col two information... Col three information... Col four information... Col five information...
Col one information... Col two information... Col three information... Col four information... Col five information...
Col one information... Col two information... Col three information... Col four information... Col five information...
Col one footer Col two footer Col three footer Col four footer Col five footer

Tabs

Note: Make the window smaller to switch the tabs to an accordion.

Tab Heading One

Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Tab Heading Two

Row one heading Row one information...
Row two heading Row two information...
Row three heading Row three information...
Row four heading Row four information...
Row five heading Row five information...

Tab Heading Three

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Accordion

Tab Heading One

Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Tab Heading Two

Row one heading Row one information...
Row two heading Row two information...
Row three heading Row three information...
Row four heading Row four information...
Row five heading Row five information...

Tab Heading Three

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Tooltips

Duis mollis est non commodo luctus this is a tooltip nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Modals

Example modal

Ratings

 

Carousels

Slideshows

Toolbar

1 – 9 of 37 products

Product Thumbnails

Product Media

Rollover image for quick zoom
Click image for full size
 

Bugaboo Buffalo

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.

Icons

Some example icons:

  • search
    search
  • zoomin
    zoom in
  • pen
    edit
  • mail
    email
  • person
    user
  • heart
    favourite
  • star
    star
  • home
    home
  • shoppingcart
    shopping cart
  • video
    video
  • phone
    phone
  • printer
    print
  • location
    location
  • file
    document
  • settings
    settings
  • box
    box
  • creditcard
    credit card
  • checkmark
    yes
  • close
    no
  • info
    info
  • grid
    grid
  • list
    list
  • login
    login
  • resizeup
    resize up
  • navigateup
    navigate up
  • navigateright
    navigate right
  • navigatedown
    navigate down
  • navigateleft
    navigate left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, culpa, accusantium consequuntur magni porro expedita dolorem ipsa adipisci eos at iusto perspiciatis suscipit dicta. Nemo, quo recusandae inventore ad repellendus!

Placeat, distinctio facilis quis iure aspernatur blanditiis laudantium magnam impedit deleniti facere vero libero atque perspiciatis odio illum ullam dolores error omnis quas aliquid? Consequatur iusto deserunt itaque eligendi vero!

Earum, quos, maxime eligendi cumque quod debitis illo blanditiis fugit magni iusto quaerat voluptatum numquam libero suscipit dignissimos voluptatem minima voluptate quasi sapiente enim saepe aliquam inventore nostrum! Natus, placeat.

This is a modal heading

This is some modal text integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor?

Yes please No thank you