Component Spacing
GreyboxPro uses advanced CSS styling to ensure your site is as efficient and streamlined as possible. The following are the layouts available in GreyboxPro Theme Options for your selection.
Section Widths
Use section widths to control the width of your content.
Section Width - Default
Class Name: section-default
Section Width - Large
Class Name: section-large
Section Width - Medium
Class Name: section-medium
Section Width - Narrow
Class Name: section-narrow
Section Width - Small
Class Name: section-small
Section Width – Extra Small
Class Name: section-xs
Section Padding
Use section padding to control the spacing at the top and bottom of a section.
Section Padding - Default
Class Name: section-padding
Section Padding - Extra Large
Class Name: section-padding-xl
Section Padding - Large
Class Name: section-padding-large
Section Padding - Medium
Class Name: section-padding-medium
Section Padding - Small
Class Name: section-padding-small
Section Padding - Extra Small
Class Name: section-padding-xs
Section Padding - Extra Large Top Small Bottom
Class Name: section-padding-xl-top-small-bottom
Section Padding - Large Top Small Bottom
Class Name: section-padding-large-top-small-bottom
Section Padding - Medium Top Small Bottom
Class Name: section-padding-medium-top-small-bottom
Section Padding - Small Top Extra Large Bottom
Class Name: section-padding-small-top-xl-bottom
Section Padding - Small Top Large Bottom
Class Name: section-padding-small-top-large-bottom
Section Padding - Small Top Medium Bottom
Class Name: section-padding-small-top-medium-bottom
Section Margin
Use section margin to control the space outside of the section content on the top, bottom, left and right.
Section Margin - Default
Class Name: section-margin
Section Margin - Extra Large
Class Name: section-margin-xl
Section Margin - Large
Class Name: section-margin-large
Section Margin - Medium
Class Name: section-margin-medium
Section Margin - Small
Class Name: section-margin-small
Section Margin - Extra Small
Class Name: section-margin-xs
Column Padding
Use column padding to control the internal top, bottom, left and right padding of each column.
Column Padding - None
Class Name: column-padding-none
Column Padding - Default
Class Name: column-padding
Column Padding - Narrow
Class Name: column-padding-narrow
Column Padding - Extra Large
Class Name: column-padding-xl
Column Padding - Large
Class Name: column-padding-large
Column Padding - Medium
Class Name: column-padding-medium
Column Padding - Small
Class Name: column-padding-small
Column Padding - Extra Small
Class Name: column-padding-xs
Column Margin
Use column padding to control the external top, bottom, left and right padding of each column.
Column Margin - Default
Class Name: column-margin
Column Margin - Default
Class Name: column-margin
Column Margin - Extra Extra Large
Class Name: column-margin-xxl
Column Margin - Extra Extra Large
Class Name: column-margin-xxl
Column Margin - Extra Large
Class Name: column-margin-xl
Column Margin - Extra Large
Class Name: column-margin-xl
Column Margin - Extra Large
Class Name: column-margin-xl
Column Margin - Extra Large
Class Name: column-margin-xl
Column Margin - Large
Class Name: column-margin-large
Column Margin - Large
Class Name: column-margin-large
Column Margin - Large
Class Name: column-margin-large
Column Margin - Large
Class Name: column-margin-large
Column Margin - Medium
Class Name: column-margin-medium
Column Margin - Medium
Class Name: column-margin-medium
Column Margin - Small
Class Name: column-margin-small
Column Margin - Small
Class Name: column-margin-small
Column Margin - Extra Small
Class Name: column-margin-xs
Column Margin - Extra Small
Class Name: column-margin-xs