Column System

Salient offers a power & fully responsive column system with tons of design options. Control things such as background images/colors, hover effects, borders, animation, positioning & much more. Each of the sections below focuses in on specific column features so take a look to learn more. Keep in mind all of these options can be used in isolation or combined.

One Full

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

One Half

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

One Half

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Two Thirds

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

One Third

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast.

One Fourth

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Three Fourths

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Five Sixths

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

One Sixth

Far away, behind the words there live.

Enable Animation

This option will cause your column to animate in when it reaches the users view on screen. There are many options to select from for animating, scroll down this page slowly so you can pay attention to each one firing

Fade In

Fade In From Left

Fade In From Right

Fade In From Bottom

Grow In

Flip In Vertical

Reveal From Right

Reveal From Bottom

Reveal From Left

Reveal From Top

Animation Delay

The animation delay input allows you to delay the column animation by a specified duration in milliseconds. E.g. “500” would delay the animation by 500ms, or 0.5 seconds. This field is extremely useful for creating staggered animations with your columns. See an example below (the value used is written in the column)

0

200

400

600

800

1000

Column Borders

You can easily add a border to any of your columns for an added highlight. The color, border width, style are defined by you – they can also be animated as well.

Solid Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Dashed Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Double Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Double Offset Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Animated Column Borders

Just another one of the many ways Salient goes the extra mile to give you more design possibilities.

Double Offset Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at.

Double Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at.

https://www.youtube.com/watch?v=6oTurM7gESE

Pretty Amazing

Customize the border width, animation timing, color & more! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at.

Column Shadowing

A great way to draw attention to a specific column in a modern way.

Small Depth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Large Depth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Boxed Column

Checking the box to enable this option will add a white BG color to your column and give a slight hover effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.

Column Padding

Allows you to define how much padding you would like from a percentage dropdown. Percentage values are used to keep everything responsive. You have the option to choose between 0%-15% for any column in your website. See below how much different values will affect the layout.

Note: You can also change what sides the padding to effect – the below example shows an even distribution on all sides, however you can specify for it to limited to one side or a combination of sides. 

0%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.

4%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.

6%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.

8%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.

Equal Height

Useful for when you have columns of differing heights and you’re using a background color/image. This will allow a cleaner overall look – can align the content to the top (shown below), middle or bottom.

orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus.

Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet. Lorem ipsum dolor sit amet.

Background Color

Sets the background color of your column to any color of your choosing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Background Color Opacity

Setting the background opacity to anything other than 1 will have it overlay on top of the BG image set on the column or anything behind the column.

Background color set to a blue with the background opacity set to 0.6

Background color set to black with the background opacity set to 0.3

Background color set to pink with the background opacity set to 0.8

Background Hover Color/Opacity

You can also change the background color and opacity of the background color of any column when hovering over it. See some examples below

Setting the background hover color to the same as the background color and changing the opacity to 1

Setting the background hover color to the same as the background color and changing the opacity slightly

Keeping the opacity the same for the background and the hover but changing the color

Focus on what matters to you

Salient Has

You Covered