GitHub

Container

Container is a structural element that restricts content to a maximum width.

Overview

Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.

Usage

Import DAFF_CONTAINER_COMPONENTS into your component:

import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_CONTAINER_COMPONENTS,
  ],
})
export class CustomComponent {}

Deprecation notice:

DaffContainerModule is deprecated. Use the standalone component imports instead.

Sizes

Set a size on container using the size property. There is no default size.

Size Max Width
xs 640px
sm 800px
md 1040px
lg 1340px
xl 1920px