Last update: April 19, 2020

Icon Box - Alignment Tips

The Icon Box element can be convenient when you want to build this kind of box.
You have an icon, a title, some text and you can also add a link or a button:

Webdesign

Compellingly parallel task one-to-one initiatives whereas cooperative customer service. Synergistically disintermediate web-enabled portals before highly efficient core.

Dev

Continually leverage existing state of the art ROI whereas stand-alone web-readiness. Appropriately.

Most of the time, you will prefer to have them with the same height.
So we just need to add a height (400px here):

Webdesign

Compellingly parallel task one-to-one initiatives whereas cooperative customer service. Synergistically disintermediate web-enabled portals before highly efficient core.

Dev

Continually leverage existing state of the art ROI whereas stand-alone web-readiness. Appropriately.

It's a bit better but the alignment is still not great. Here are two ways to fix it

The "space-between" way

It distributes the items evenly: The first item is flush with the start, the last is flush with the end.
Note that the first item here, is the Title, and not the Icon. The Title, the text and the link are all parts of the same container.

.oxy-icon-box .oxy-icon-box-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

You can also replace .oxy-icon-box by your own class, if you don't want to change all the Icon Box of the page.

Webdesign

Compellingly parallel task one-to-one initiatives whereas cooperative customer service. Synergistically disintermediate web-enabled portals before highly efficient core.

Dev

Continually leverage existing state of the art ROI whereas stand-alone web-readiness. Appropriately.

The "margin-top" way

We only move the button to the bottom. The rest (title and text) doesn't move.

.oxy-icon-box .oxy-icon-box-content {
    display: flex;
    flex-direction: column;
}

.oxy-icon-box .oxy-icon-box-link {
    margin-top: auto;
}

Webdesign

Compellingly parallel task one-to-one initiatives whereas cooperative customer service. Synergistically disintermediate web-enabled portals before highly efficient core.

Dev

Continually leverage existing state of the art ROI whereas stand-alone web-readiness. Appropriately.

closealign-justifychevron-downcaret-upmagic-wandscreen