SG - Components

Flask Icon

This example uses the classes site-flask-icon flask-grey flask-large flask-right flask-stretch-content

The flask icon can be added to a text feature using the class site-flask-icon. There are then additional options to style the flask to your requirements:

You can't see the flask icon in edit mode, please use preview mode or logged out mode.

Colors

You can style the flask (and text) to 3 colours with classes:

  • flask-light-green
  • flask-dark-green
  • flask-grey

The default colour of the flask is white.

Alignment

You can align the flask right of it's content using the class flask-right. The flask aligns left by deafult so no class is required for this.

In order to align the flask to the side of either screen, use the flask-stretch-content class, which will make the text full width (with the icon next to it).

Size

You can increase the size of the flask from the deafult size by adding the class flask-large.

Inline Flask Icon - right

This example uses the classes site-flask-icon flask-dark-green flask-right.

Inline Flask Icon

This example uses the classes site-flask-icon flask-light-green.

Inline Flask Icon - large

This example uses the classes site-flask-icon flask-grey flask-large.

Flask above text

This example uses the classes site-flask-icon flask-light-green flask-above-text.

Flask below text

This example uses the classes site-flask-icon flask-light-green flask-below-text.

Parallax

Parallax Up

Add the parallax-up class to the image.

Parallax Down

Add the parallax-down class to the image.

Site Display Tabs 1

Filter By:

SG - Post 5

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 4

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 3

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 2

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 1

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

Site Display Tabs 2

Filter By:

SG - Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi nisi, venenatis id lectus id, tristique iaculis orci. Praesent sit amet nisi at quam sagittis molestie. Vivamus in congue nunc. Morbi vel orci eu elit finibus commodo vitae a massa. Vivamus in congue nunc. Morbi vel orci eu elit finibus commodo vitae a massa.

Find out more

SG - Post 1

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 2

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 3

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 4

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

Site Display Tabs 3

Filter By:

SG - Post 5

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 4

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 3

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 2

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 1

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

Site custom tabbed slider - Display

Filter By:

SG - Post 5

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 4

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 3

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 2

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.

SG - Post 1

Nam dapibus, orci molestie blandit ultricies, nisi diam facilisis eros, eget convallis nibh turpis ac ante. Integer sed nisi rutrum, interdum enim vitae, elementum lorem. Aenean quis tellus ac tellus elementum ultricies. Nulla libero nunc, vehicula et hendrerit non, aliquam lobortis orci.