m.band

One of the true core components, the band helps to separate sections of elements. There are several modifiers for different padding sizes.

Block

.band

Sets background declarations, size to cover, image to center and no-repeat. Default vertical padding is the base spacing unit.

Elements

    • .band__body

    • Optional

    Sets width at 100% and display inline-block;

Modifiers

    • .band--tiny

    • Enabled

    One quarter of the size of the base spacing unit.

    • .band--small

    • Enabled

    One half of the size of the base spacing unit

    • .band--large

    • Enabled

    Double the size of the base spacing unit. The large band appears as a standard sized band below the desktop viewport size.

    • .band--huge

    • Enabled

    Quadruple the size of the base spacing unit. The large band appears as a large sized band below the desktop viewport size.

    • .band--giga

    • Enabled

    This equals to six times the height of the base spacing unit at wide sizes. On mobile, it uses the huge size, changing to 5 times the base spacing unit on desktop, then the final 6 times the base spacing unit on wide.

    The giga size is mainly reserved for hero units, rather than used on standard content blocks.

    • .band--background-fixed

    • Disabled

    Fix the background image applied to the band.

    This is not something that has been extensively tested on devices, so it may break on the iPad.

    • .band--background-fit

    • Disabled

    Ensure the background fits the space, rather than covers it.

    • .band--hero

    • Enabled

    Set a background colour behind hero units, this automatically applies the secondary colour by default. A sass if statement is in place to check if the base typeface colour will be legible on this secondary colour – if not, it will change the text colour to white.

    • .band--attention

    • Enabled

    Set the primary colour in the background. A sass if statement is in place to check if the base typeface colour will be legible on this secondary colour – if not, it will change the text colour to white.