Container is a structural element that restricts content to a maximum width.
Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.
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:
DaffContainerModuleis deprecated. Use the standalone component imports instead.
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 |