Skip to main content

Column

Overview

Columns enable you to horizontally organise the content within your sections. They must be located under mj-section tags in order to be considered by the engine. To be responsive, columns are expressed in terms of percentage.

❗️ The Border Radius and Inner Border Radius parameters will only apply to background colours because of Outlook compatibility. If you'd like to add a selector to override this, add the following

.c-rounded table,
.c-rounded table > tr > td,
.c-rounded table > tbody > tr > td
{ border-collapse:separate; }

as a Custom CSS Style block and then in your column under Styling/Custom CSS Classes add c-rounded. This will then apply it to your borders but might give unexpected behavior in Outlook.

email borders


Parameters

ParameterParameterValid BlocksRequired
ChildrenChildren componentColumn Component Block GroupNo
Style SetsOptional list of Email Style blocks to apply to this blockText Block GroupNo
Custom CSS ClassesOptional space-separated list of CSS classes to be applied to the element. Intended for use with EmailCSS blocks.Text Block GroupNo
WidthThe width of the element.Unit Value Block GroupNo
PaddingThe padding around the element.Text Block GroupNo
Padding BottomThe padding below the element.Unit Value Block GroupNo
Padding LeftThe padding to the left of the element.Unit Value Block GroupNo
Padding RightThe padding to the right of the element.Unit Value Block GroupNo
Padding TopThe padding above the element.Unit Value Block GroupNo
BorderThe border around the element.Text Block GroupNo
Border TopThe border across the top of the element.Text Block GroupNo
Border RightThe border down the right of the element.Text Block GroupNo
Border BottomThe border across the bottom of the element.Text Block GroupNo
Border LeftThe border down the left of the element.Text Block GroupNo
Border RadiusApplies to background only. To override this see documentation.Text Block GroupNo
Inner BorderThe inner border around the element.Text Block GroupNo
Inner Border TopThe inner border across the top of the element.Text Block GroupNo
Inner Border RightThe inner border down the right of the element.Text Block GroupNo
Inner Border BottomThe inner border across the bottom of the element.Text Block GroupNo
Inner Border LeftThe inner border down the left of the element.Text Block GroupNo
Inner Border RadiusThe rounding radius of the corners of the element.Text Block GroupNo
Background ColourThe colour of the background of this block.Colour Block GroupNo
Inner Background ColourThe inner background colour of the column. Requires a padding to show.Colour Block GroupNo
Vertical AlignmentVertical position of the element within its container.Text Block GroupNo