Page Templates

Public

Grid

The grid is your scaffolding. Containers will fit into these grids depending on how they are constructed. The grid is also your key to creating a responsive block, as you can specify how many columns a container takes up at small, medium and large screen sizes, as well as their visibility.

.small-12

.small-12 .medium-8

.small-4 .medium-6

.small-3 .medium-6 .columns

Type

Type heirarchy and consistent use of the available type treatments will help users grasp your content better. They wont be confused which of your contents are

headers

, links, strong content, emphasized content, code, or normal text.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body copy

Link

This is a blockquote.

This is an italicized blockquote.

Buttons

This is your standard action element. Using buttons and being consistent in their context will point your users to things they need to do on your site.

Basic Buttons

Primary Button Secondary Button

Success Warning Error

White Disabled

Regular Small Tiny

Full Width

Button Groups

Button A Button B Button C

Dropdowns

Labels

These are not buttons. Labels are for non-actionable but useful information. They are commonly used to call attention to states like New, Expiring, Overdue and the like.

Neutral Success Warning Error

Round Neck New Ending Soon Out of Stock

Round Neck New Ending Soon Out of Stock

Content Box

This is your most versatile element. These boxes adjust to the grid and can accommodate various content types – images, video, text, buttons, forms. Content boxes allow you to group and separate various types of information to present it better. Be creative with it, but remember to keep things simple.

Hello!

Body text here.

Yay!

22 views

Price

Php 499

Artist

Chaks

Like this shirt?

Buy This

Date Submitted

March 28, 2015

Style

Round Neck

More Details

Bacon & Eggs

Php 599

By chaks Tags: round neck, silkscreen, vector

Forms

Forms appear everywhere. Make sure you use them consistently and in the proper context

Block Forms

Inline Forms

Tables

This is your standard table. Use it to present big chunks of information in an organized manner, or show small bits in a more formal manner.

Description	SKU	Inventory	Actions
Round Neck Shirt - Men	RND-M-S	355	Edit Delete
Round Neck Shirt - Men Out of stock	RND-M-M	0	Edit Delete
Round Neck Shirt - Men	RND-M-L	176	Edit Delete
Round Neck Shirt - Men	RND-M-XL	865	Edit Delete

Alerts

Sample

Check out our new blog post.

Your design has been approved!

You need to update your security settings.

Username/password does not match.

Icons