Style Guide (Content Heading on Pages)

Headings


h1. Heading

h2. Heading

h3. Heading

h4. heading

h5. heading
h6. Heading

This is a h1 heading

Next to some paragraph copy, so you can see how elements relate with each other across viewports.

This is a h2 heading

Next to some paragraph copy, so you can see how elements relate with each other across viewports.

This is a h3 heading

Next to some paragraph copy, so you can see how elements relate with each other across viewports.

This is a h4 heading

Next to some paragraph copy, so you can see how elements relate with each other across viewports.

This is a h5 heading

Next to some paragraph copy, so you can see how elements relate with each other across viewports.

This is a h6 heading

Next to some paragraph copy, so you can see how elements relate with each other across viewports.

Paragraphs


Standard

Lorem ipsum dolor sit amet, consectetur adipiscing elit In dignissim dui a leo venenatis, vestibulum sagittis purus aliquam. Phasellus tempor at orci non dictum. Donec dignissim elit vel suscipit fringilla. Nam ultricies condimentum ante, ut vehicula leo scelerisque eget. Vivamus

Lorem ipsum dolor sit amet, consectetur adipiscing elit In dignissim dui a leo venenatis, vestibulum sagittis purus aliquam. Phasellus tempor at orci non dictum. Donec dignissim elit vel suscipit fringilla. Nam ultricies condimentum ante, ut vehicula leo scelerisque eget. Vivamus

Lead

Lorem ipsum dolor sit amet, consectetur adipiscing elit In dignissim dui a leo venenatis, vestibulum sagittis purus aliquam. Phasellus tempor at orci non dictum. Donec dignissim elit vel suscipit fringilla. Nam ultricies condimentum ante, ut vehicula leo scelerisque eget. Vivamus

Text Alignment

Left aligned text on all viewport sizes. .text-left

Left aligned text on viewports sized SM (small) or wider. .text-sm-left

Left aligned text on viewports sized MD (medium) or wider. .text-md-left

Left aligned text on viewports sized LG (large) or wider. .text-lg-left

Left aligned text on viewports sized XL (extra-large) or wider. .text-xl-left

Center aligned text on all viewport sizes. .text-center

Center aligned text on viewports sized SM (small) or wider. .text-sm-center

Center aligned text on viewports sized MD (medium) or wider. .text-md-center

Center aligned text on viewports sized LG (large) or wider. .text-lg-center

Center aligned text on viewports sized XL (extra-large) or wider. .text-xl-center

Right aligned text on all viewport sizes .text-right.

Right aligned text on viewports sized SM (small) or wider. .text-sm-right

Right aligned text on viewports sized MD (medium) or wider. .text-md-right

Right aligned text on viewports sized LG (large) or wider. .text-lg-right

Right aligned text on viewports sized XL (extra-large) or wider. .text-xl-right

Justify text on all viewport sizes .text-justify. Lorem ipsum dolor sit amet, consectetur adipiscing elit In dignissim dui a leo venenatis, vestibulum sagittis purus aliquam. Phasellus tempor at orci non dictum. Donec dignissim elit vel suscipit fringilla. Nam ultricies condimentum ante, ut vehicula leo scelerisque eget. Vivamus ut ipsum sed felis mollis finibus. Aenean ut hendrerit arcu. Pellentesque commodo justo dignissim varius pharetra. Fusce porta vehicula facilisis.

Inside text elements

You can use the mark tag to highlight text.

del tag - This line of text is meant to be treated as deleted text.

s tag - This line of text is meant to be treated as no longer accurate.

ins tag - This line of text is meant to be treated as an addition to the document.

u tag - This line of text will render as underlined

small tag - This line of text is meant to be treated as fine print.

Strong tag - This line rendered as bold text.

em tag - This line rendered as italicized text.

Text Transform

Lowercased Text. .text-lowercase

Uppercased text .text-uppercase

capitatized text. .text-capitalize

Font Weight & Italics

Bold text. .font-weight-bold

Normal weight text. .font-weight-normal

Italic text. .font-italic

List


List Standard

Below is the default styling using the standard 'ul' and 'li' list tags.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
List Unstyled

Using the .list-unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
List Inline

Using the .list-inline class on the 'ul' tag will remove the default left padding and arrange the items side by side horizontally. By adding .list-inline-item to the 'li' tag will remove the bullet points.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Tables


Table

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

Monday 08:30 - 17:00
Tuesday 08:30 - 17:00
Wednesday 08:30 - 17:00
Thursday 08:30 - 17:00
Friday 08:30 - 17:00 (April-September)
  08:30 - 15:00 (October-March)
Saturday Closed
Sunday Closed

Table head options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark Table

You can invert the colors—with light text on dark backgrounds—with .table-dark.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small Table

Add .table-sm to make tables more compact by cutting cell padding in half.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive Tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Always-responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

Breakpoint Specific

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

Icon Font


The icon set is using the Material Design Icon set.

  • shopping_cart shopping_cart
  • search search
  • info info
  • info_outline info_outline
  • phone_android phone_android
  • local_phone local_phone
  • person person
  • account_circle account_circle
  • keyboard_arrow_down keyboard_arrow_down
  • keyboard_arrow_up keyboard_arrow_up
  • warning warning
  • settings settings
  • add add
  • remove remove
  • chevron_left chevron_left
  • chevron_right chevron_right
  • school school
  • mode_comment mode_comment

Colours


Background Colours

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

Text Colours

Contextual text classes are available for you to apply to type elements

Base type colour

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

Stock Labels

Low Stock

In Stock

Out of Stock

Pre Order

Product Key

  = Compulsory item

  = Optional item

Link Colours

The contextual text classes also work well on anchors with the provided hover and focus states.

Buttons


Page Builder

You have three button options when you add a button item to content within the page builder.

Page Builder  -  Button Item
Button Item Primary (default)
Button Item Secondary

You can add multiple buttons using the Button Item and choose between Stacked and inline

Button Items Stacked - NOT the same size
Button
Button Longer Text
Button Items Stacked - Same Size

Should take the size of the widest button and center text. 

Button
Button Longer Text
Button Items Inline - Not the same size
Button
Button Longer Text
Button Items Inline - Same size

Should take the size of the widest button and center text

Button
Button Longer Text
Page Builder  -  Banner Item (buttons)

Button Mark up is slightly different in Banner Items so the styling needs to be considered. Again you have three button options when you add a button to a banner item in the page builder using the available properties.

Porto Theme

Buttons used as part of the page templates and commerce journey have different mark up to the buttons in the page builder

Primary

All links and buttons with the classes .action and .primary on will display as below:

Default primary styling

View Checkout Now

All button elements, when using the above classes have the below default styling applied:

Button primary styling

Secondary

All links and buttons with the class .action on will display as below:

Default Secondary styling

View Checkout Now

All button elements, when using the above class will adopt the below style:

Button Secondary styling

Call to Actions have been tweaked throughout the purchase journey in the Porto theme templates to compliment the context they are displayed in.

Recently Ordered function 

Users can add lastest items to cart, or view

The default button primary styling has been amended in this use case so it has a different height

Product listings

On product/variants in listings the add to basket button displays on hover of the product item.

Currently the primary button styling has been overwritten when used in a product list and the class tocart is added and the button is nested within a 3 deep div structure with the respective classes .products-grid.product-item-details.product-item-actions

Product Detail Page

When a user adds to basket from a product page the button state updates momentarily to reassure the user that the action has been completed.

Mini Basket - Secondary Button:

The button padding, width and font appearance has been amended from the default secondary styling.

Mini Basket - Primary Button:

The button padding, width and font size has been amended from the default primary styling.

Basket - Primary

A width of 100% has been applied when the primary button is displayed in the right column, to give it more prominence on the page as there are 3 primary buttons.

Icon Buttons

Icon Buttons used for secondary actions such as add to wishlist, email a friend and compare.

Product Listings

On product/variants in listings - The add to wishlist, add to basket and add to compare buttons display on hover of the product item.

Product Detail

On product/variants in listings - The add to wishlist, add to basket and add to compare buttons display on hover of the product item.

Borders


You can apply a border to Rows, Columns and Items within the page builder. You can customise the colour on a case by case basis but we recommend setting usage guidelines for content editors. Below are the border options.

This is the default border

This is the dotted border

This is the dashed border

This is the solid border

This is the double border

This is the groove border

This is the ridge border

This is the inset border

This is a outset border

Alerts


The alert styling on the Porto theme does not make use of the bootstrap alert classes.