Containers

Default
Small
Medium
Large
Extra Large
100% of it's container
Start
End

The basic container is a custom element called mc-container, which evaluates to the a max-width of --mc-width-content-area. It also has margin-left and margin-right set to auto, so it aligns in the centre of the screen if the screen is wider than its max-width.

It accepts props for padding, size, gap and alignment, with the following allowed values:

Padding:
- inline - inline-padding is set to --mc-spacing
- block - block-padding is set to --mc-spacing
- all - padding is set to --mc-spacing
Size:
- small - max-width is set to --mc-width-small
- medium - max-width is set to --mc-width-medium
- large - max-width is set to --mc-width-large
- xlarge - max-width is set to --mc-width-xlarge
- 100 - max-width is set to 100%
Gap:
- small - gap is set to --mc-spacing-small
- medium - gap is set to --mc-spacing-medium
- large - gap is set to --mc-spacing-large
- larger - gap is set to --mc-spacing-larger
- largest - gap is set to --mc-spacing-largest
Alignment:
- start - aligns the container to the inline-block-start
- end - aligns the container to the inline-block-end

If you use the gap property, the container sets display: grid on itself with a one column grid, then each item placed in it will have the specified gap between itself and the next item. This is handy if you wanted to place two cards on top of each other but not have them touching off each other.

Container: Default

        
        <mc-container>
          HTML here
        </mc-container>

A heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit delectus nisi nobis ad tenetur dignissimos? Praesentium quia beatae cupiditate consectetur, dolores quibusdam eum fuga cum tenetur optio, natus nesciunt consequatur?

Another heading

Container: Small

        
        <mc-container size="small">
          HTML here
        </mc-container>

A heading

Another heading

Container: Medium

        
        <mc-container size="medium">
          HTML here
        </mc-container>

A heading

Another heading

Container: Large

        
        <mc-container size="large">
          HTML here
        </mc-container>

A heading

Another heading

Container: Extra Large

        
        <mc-container size="xlarge">
          HTML here
        </mc-container>

A heading

Another heading

Container: 100% of it's container

        
        <mc-container size="100">
          HTML here
        </mc-container>

A heading

Another heading

Container: Start

You can use start or left for this value. The preference is to use start.

        
        <mc-container size="small" alignment="start">
          HTML here
        </mc-container>

A heading

Another heading

Container: End

You can use end or right for this value. The preference is to use end.

        
        <mc-container size="small" alignment="end">
          HTML here
        </mc-container>

Containers

Table of contents

Container: Default

A heading

Another heading

Container: Small

A heading

Another heading

Container: Medium

A heading

Another heading

Container: Large

A heading

Another heading

Container: Extra Large

A heading

Another heading

Container: 100% of it's container

A heading

Another heading

Container: Start

A heading

Another heading

Container: End

A heading

Another heading