Component DNA

How to choose between small, medium, and large component fit in the Maersk Design System.

MDS core components use a property called fit to control their sizing. Most components support three fit values: small, medium, and large. Fit determines a number of size-related properties including height, padding, border radius and typographic scale. Certain shared elements like icons may remain consistent across fits.

Example required

Components rendered with different fit values

When to use

Default: Use medium unless you have a specific reason not to.

Use small when:

The interface is data-dense (tables, dashboards, admin tools)
Screen real estate is constrained (small desktop viewports, side panels)
You need to provide a very compact layout or view

Use medium when:

Building general-purpose customer-facing experiences
No specific density or touch requirements apply
This is the default used on Maersk.com

Use large, x-large and xx-large when:

The layout is spacious and visually driven (marketing pages, landing pages)
The primary input method is touch (tablets, kiosks)
You need to meet larger touch-target accessibility requirements

Keep it consistent

Use one fit value consistently across a product or area. Mixing fits creates visual inconsistency and maintenance overhead.

If you must mix fits, document which fit applies where and why. Don’t leave it to individual judgment.

Why “fit” and not “size”?

We use fit to keep naming consistent across design and engineering.

“size” conflicts with HTML. The native size attribute on <input> sets character width, not visual scale.
“scale” is inaccurate. Components don’t simply scale up or down; internal proportions change.
“density” is incomplete. Fit adjusts more than just spacing.

The analogy is clothing: a “tailored fit” and “loose fit” shirt differ in overall dimensions, but share parts like button size. Similarly, a small and large MDS component differ in height and padding, but share icon sizes and border radii.

Components

The following components support the fit property.

Component	Values
mc-accordion	`small`, `medium`, `large`
mc-accordion-item	`small`, `medium`, `large`
mc-avatar	`x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`
mc-badge	`small`, `medium`
mc-button	`small`, `medium`, `large`
mc-button-group	`small`, `medium`, `large`
mc-button-group-item	`small`, `medium`, `large`
mc-card	`small`, `medium`, `large`
mc-checkbox	`small`, `medium`, `large`
mc-checkbox-group	`small`, `medium`, `large`
mc-code-preview	`small`, `medium`
mc-date-range	`small`, `medium`, `large`
mc-dialog	`small`, `medium`
mc-drawer	`small`, `medium`
mc-error	`small`, `medium`, `large`
mc-file-upload	`small`, `medium`, `large`
mc-hint	`small`, `medium`, `large`
mc-input	`small`, `medium`, `large`
mc-input-date	`small`, `medium`, `large`
mc-input-group	`small`, `medium`, `large`
mc-input-time	`small`, `medium`, `large`
mc-label	`small`, `medium`, `large`
mc-link-button	`small`, `medium`, `large`
mc-list	`small`, `medium`, `large`
mc-list-item	`small`, `medium`, `large`
mc-loading-indicator	`small`, `medium`, `large`
mc-menu	`small`, `medium`, `large`
mc-modal	`small`, `medium`
mc-multi-choice-fieldset	`small`, `medium`, `large`
mc-multi-select	`small`, `medium`, `large`
mc-notification	`small`, `medium`, `large`
mc-number-stepper	`small`, `medium`, `large`
mc-option	`small`, `medium`, `large`
mc-picker	`small`, `medium`, `large`
mc-picker-item	`small`, `medium`, `large`
mc-popover	`small`, `medium`, `large`
mc-progress-indicator	`small`, `medium`, `large`
mc-radio	`small`, `medium`, `large`
mc-radio-group	`small`, `medium`, `large`
mc-segmented-control	`small`, `medium`, `large`
mc-segmented-control-item	`small`, `medium`, `large`
mc-select	`small`, `medium`, `large`
mc-select-native	`small`, `medium`, `large`
mc-split-button	`small`, `medium`, `large`
mc-step-indicator	`small`, `medium`, `large`, `x-large`
mc-step-indicator-item	`small`, `medium`, `large`, `x-large`
mc-switch	`small`, `medium`, `large`
mc-switch-group	`small`, `medium`, `large`
mc-tab	`small`, `medium`, `large`
mc-tab-bar	`small`, `medium`, `large`
mc-table	`small`, `medium`, `large`
mc-tag	`small`, `medium`, `large`
mc-text-and-icon	`small`, `medium`, `large`
mc-textarea	`small`, `medium`, `large`
mc-theme-switch	`small`, `medium`, `large`
mc-time-picker	`small`, `medium`, `large`
mc-toast	`small`, `medium`, `large`
mc-toolbar	`small`, `medium`, `large`
mc-tooltip	`small`, `medium`, `large`
mc-typeahead	`small`, `medium`, `large`
mc-typeahead-multi-select	`small`, `medium`, `large`