Skip to Main Content

Alignment

Using Alignment

This attribute aligns inline level elements based on the media query and alignment provided. This is useful for aligning content at different media queries.

Markup

<div data-c-alignment="MEDIA(ALIGNMENT)">

Available Arguments

# MEDIA

base
pp (Phone - Portrait)
pl (Phone - Landscape)
tp (Tablet - Portrait)
tl (Tablet - Landscape)
ds (Desktop - Small)
dm (Desktop - Medium)
dl (Desktop - Large)
# ALIGNMENT

left
centre / center
right

In Practice

<!--Centred initially, left aligned on landscape tablets.-->
<div data-c-alignment="base(centre) tl(left)"></div>
<!--Centred initially, right aligned on landscape phones, centred on landscape tablets, right aligned on large desktops.-->
<div data-c-alignment="base(centre) pl(right) tl(centre) dl(right)"></div>

Changelog

Version 2.3.4