Jump to main content


File location: sass/layout/sass/layout/helpers/_adjustment.scss (GitHub)

Push and pull

Push and pull classes can be used to fine tune the position of HTML elements. We use two methods:

  • push and pull
  • translate-push and translate-pull

Push/pull will influence sibling element(s), while translate-push/-pull will move the element independently of its surroundings. Translate-push/pull requires that the element is a block level element. If it's not already a block level element, add .block or .inline-block to it. Translate-push/pull is very useful for pixel perfect positioning of – for example – icons (svg/png), relative to other page elements.

Class Name Comment
.push1v ... .push40v Push 1-40px vertically (down)
.pull1v ... .pull40v Pull 1-40px vertically (up)
.push1h ... .push40h Push 1-40px horizontally (right)
.pull1h ... .pull40h Pull 1-40px horizontally (left)
.translate-push1v ... .translate-push40v Move 1-40px down
.translate-pull1v ... .translate-pull40v Move 1-40px up
.translate-push1h ... .translate-push40h Move 1-40px right
.translate-pull1h ... .translate-pull40h Move 1-40px left

Push down ↓



Pull up ↑



Push right →



Pull left ←




Class Name CSS Properties
.static position: static;
.absolute position: absolute;
.fixed position: fixed;
.relative position: relative;
.sticky position: sticky;
.position-initial position: initial;
.position-inherit position: inherit;
.absolute-center left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);

Alignment of Positioned Elements

For use together with one of the position utilities in the list above.

Class Name CSS Properties Comment
.pos-spread top: 0; right: 0;
bottom: 0; left: 0;
Full viewport overlay
.pos-fill-v top: 0; bottom: 0; Fill up viewport vertically
.pos-fill-h left: 0; right: 0; Fill up viewport horizontally
.pos-top-0 top: 0; Relative to top of element or viewport
.pos-bottom-0 bottom: 0; Relative to bottom of element or viewport
.pos-left-0 left: 0; Relative to left side of element or viewport
.pos-right-0 right: 0; Relative to right side of element or viewport


z-index indicates the stacking order of positioned elements. With these utility classes you can stack elements in layers, relative to each other, after first applying a position. Non-positioned elements won't be affected.

  <header "class="sticky pos-top-0 z-index-4">
    This element will be visible above elements with lower or no z-index 
    applied, and stick to the top of the window when the page is scrolled.
Class Name CSS Property
.z-index-1 z-index: 1;
.z-index-2 z-index: 2;
.z-index-3 z-index: 3;
etc. ...
.z-index-18 z-index: 18;
.z-index-19 z-index: 19;
.z-index-20 z-index: 20;
.z-index-999 z-index: 999;
.z-index-unset z-index: unset;


Class Name CSS Property
.fr float: right;
.fl float: left;
.fn float: none;


Class Name CSS Properties
.clear-left clear: left;
.clear-right clear: right;
.clear-both clear: both;
.clearfix :after {
   clear: both;
   content: ' ';
   display: table;
.clear-none clear: none;


Specifies how an external object such as an image should be fitted within its container. Refer to this MDN page for further documentation.

Class Name CSS Property
.fill object-fit: fill;
.contain object-fit: contain;
.cover object-fit: cover;
.scale-down object-fit: scale-down;
.object-fit-none object-fit: none;


Determines how content within inline, inline-block and table-cell elements should be vertically positioned. The hgrid default value is align-baseline, as set in _base.scss. Refer to MDN for examples.

Class Name CSS Property
.align-top vertical-align: top;
.align-middle vertical-align: middle;
.align-bottom vertical-align: bottom;
.align-text-top vertical-align: text-top;
.align-text-bottom vertical-align: text-bottom;
.align-baseline vertical-align: baseline;

Previous: Tables

Next: Padding