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 |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
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 |
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 |
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 | ||
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 | ||
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-whiteText 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
You can add multiple buttons using the Button Item and choose between Stacked and inline
Button Items Stacked - NOT the same size
Button Items Stacked - Same Size
Should take the size of the widest button and center text.
Button Items Inline - Not the same size
Button Items Inline - Same size
Should take the size of the widest button and center 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
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
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.