m.box

Block

.box

Without it’s elements, the box component by itself appears to do nothing. Both the title and content elements are optional, however at least one element should be present.

The link will only output if the title appears.

  • Title

    Lorem ipsum dolor

Elements

    • .box__title

    • Optional

    Title to appear above the content

    • .box__content

    • Optional

    Content to appear within the box. Multiple content blocks can be placed within a box.

    • .box__link

    • Optional

    The title is required for the link to output.

Modifiers

    • .box--large

    • Enabled

    Adjust the box padding to be larger.

    • Here is some box content.

    • .box--primary

    • Enabled

    Set the background colour to the primary background colour.

    • Here is some box content.

    • .box--secondary

    • Enabled

    Set the background colour to the secondary background colour.

    • Here is some box content.

    • .box--tertiary

    • Enabled

    Set the background colour to the tertiary background colour.

    • Here is some box content.

    • .box--quarternary

    • Enabled

    Set the background colour to the quarternary background colour.

    • Here is some box content.

    • .box--senary

    • Enabled

    Set the background colour to the senary background colour.

    • Here is some box content.

    • .box--white

    • Enabled

    Set the background colour to a white background colour.

    • Here is some box content.

    • .box--semi-transparent

    • Enabled

    Set the background colour to a semi-transparent white background. It’s set at 85% white.

    • Here is some box content.

Examples

  • A box with only a title.

    • Title

      Lorem ipsum dolor

  • A box with only content

    • Title

      Lorem ipsum dolor

  • A box with title and multiple content areas.

    • Title

      Lorem ipsum dolor