Media Elements

Rich media components including image galleries, video players, audio players, parallax backgrounds, modals, tabs, alerts, tooltips, and grid layouts.

Alerts

Tooltips

Tabs

  1. Tab 1
  2. Tab 2
  3. Tab 3
  4. Tab 4

Content 1 here

The tab content will be contained below each tab header. Excepteur nisi nulla sint amet incididunt exercitation commodo laboris id pariatur tempor labore minim.


Grid

(this needs to be worked on)

Full width 1

Half 1

Half 2

Third 1

Third 2

Third 3

Fourth 1

Fourth 2

Fourth 3

Fourth 4

Sixth 1

Sixth 2

Sixth 3

Sixth 4

Sixth 5

Sixth 6

Twelfth 1

Twelfth 2

Twelfth 3

Twelfth 4

Twelfth 5

Twelfth 6

Twelfth 7

Twelfth 8

Twelfth 9

Twelfth 10

Twelfth 11

Twelfth 12

Example Parallax

Parallax Example

Background image stays static as the user scrolls down the page.


Common Section

Full width colored line, with a positioned image on the side with a hover effect.

floating logo

Basic Header with Background Image

Beach background

Header with Children Content and Background Color

Sky and mountain background

Welcome to Our Site

This is content overlaid on the header image

Header with Blur Effect

Hill with fog background

Blurred Background

Content stands out with blurred background

Header with Custom Padding and Borders

Trees and house background

Custom Styled Header

With padding and colored borders

Header without Background Image (Color Only)

No Image Required

Just background color and content

SVG section

Consequat irure occaecat mollit commodo deserunt eu ipsum Lorem adipisicing in eu esse. Qui eiusmod irure culpa aliqua incididunt exercitation eu cillum. Magna ullamco ut in veniam et excepteur esse cillum irure excepteur. Do in labore in amet. Commodo non nulla ad Lorem labore laborum sit nisi. Labore consectetur magna enim commodo laboris sint et. Ullamco exercitation commodo sit voluptate laborum magna eu quis aliqua irure exercitation adipisicing quis. Minim est reprehenderit duis esse ullamco mollit sint proident Lorem est adipisicing in Lorem. Ut deserunt adipisicing in laboris ad irure officia cupidatat laboris culpa consequat ea exercitation. Laboris nulla magna non dolor aliqua labore exercitation. Laborum duis labore reprehenderit veniam esse est sit do magna ullamco aute nostrud fugiat duis. Non nisi est aute fugiat. Qui pariatur dolore velit est est proident quis occaecat commodo ad aute id deserunt fugiat. Enim ad reprehenderit id eiusmod laborum qui anim aliqua veniam cillum sit pariatur reprehenderit voluptate.

Mollit commodo deserunt eu ipsum Lorem adipisicing in eu esse. Qui eiusmod irure culpa aliqua incididunt exercitation eu cillum. Magna ullamco ut in veniam et excepteur esse cillum irure excepteur. Do in labore in amet. ore exercitation. Laborum duis labore reprehenderit veniam esse est sit do magna ullamco aute nostrud fugiat duis. Non nisi est aute fugiat. Qui pariatur dolore velit est est proident quis occaecat commodo ad aute id deserunt fugiat. Enim ad reprehenderit id eiusmod laborum qui anim aliqua veniam cillum sit pariatur reprehenderit voluptate.

Audio Players

0:00/0:00
0:00/0:00
0:00/0:00

Example Subheading to Example Video

Loaders

Logo Lottie animation

Stopwatch SVG animation

Basic spinner



Squiggle SVG

Masonry Gallery

A curious cat lounging in the afternoon sun, perfectly content with life and completely unaware of how photogenic it is
Big Ben on a cloudy London day
This is an somewhat long caption to test the truncation behavior on mobile devices. This is an somewhat long caption to test the truncation behavior on mobile devices. This is an somewhat long caption to test the truncation behavior on mobile devices.
Good girl!!
This is an extremely long caption to test the truncation behavior on mobile devices. It should get clipped to two lines when the lightbox is viewed on a small screen, and then expand to show the full text when you tap on it. Tap again to collapse it back down to the truncated view. It should get clipped to two lines when the lightbox is viewed on a small screen, and then expand to show the full text when you tap on it. Tap again to collapse it back down to the truncated view.This is an extremely long caption to test the truncation behavior on mobile devices. It should get clipped to two lines when the lightbox is viewed on a small screen, and then expand to show the full text when you tap on it. Tap again to collapse it back down to the truncated view. It should get clipped to two lines when the lightbox is viewed on a small screen, and then expand to show the full text when you tap on it. Tap again to collapse it back down to the truncated view.
Morning fog rolling over the hills

Horizontal Gallery

pic 0
pic 1
pic 2
pic 3
pic 4
pic 5
pic 6
pic 7
pic 8
pic 9
pic 10
pic 11
pic 12
pic 13