How to position content in Source
| 14 Nov 2020
It is easy to position content over a background image but no so easy to do it over other content stacks. With a couple of Source Utility Classes though it is a breeze!
There are times where you may want to position content over other content - for example you may want to have a button in the middle of an image or a 'New!' label at the top-right of a product listing etc etc. Source Utility Classes stack ships with a number of pre-built CSS classes that let us do just that. By adding a simple class name we can position / 'target' our content in 1 of 5 places relative to the parent container. Here are the available classes:
- Position top-right (
pos-tr
) - Position top-left (
pos-tl
) - Position center (
pos-center
) - Position bottom-left (
pos-bl
) - Position bottom-right (
pos-br
)
The video below demonstrates using these classes to position a label in various places in a grid item (and over an image).
Why do I need to use classes for this?
Using classes like this is a very powerful (and easy) way to achieve effects such as these and it also means that we don't need to clog up our stacks settings in Source for something that you may / may not use.
Like this post?
Why not share with others that might like it too?!