Culture Amp
Menu
Also known as:
Responsive

Sizing

Components come in different sizes, suitable for different viewports.

AnchorNeed to know

  • Use "Small", "Medium", "Large" and, in code, use `sm`, `md`, `lg`.
  • For additional sizing options: in code, use `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.

To keep in mind

  • We use 3 primary Sizing options for most components: "Small", "Medium", "Large".
    • In code, sm, md, lg.
    • Some components only need 2 sizes, e.g. “Small” and “Medium”.
    • If a component has only one size, we refer to it by its name or “default”.
  • For additional sizing options, if absolutely necessary, you can use these 7 options: "Extra Extra Small", "Extra Small", "Small", "Medium", "Large", "Extra Large", and "Extra Extra Large".
    • In code, xxs, xs, sm, md, lg, xl, and xxl.
  • A component sizing option doesn’t mean it is necessarily fixed width or fluid width.
  • In some cases, we don’t specify a “size” but rather a minimum and maximum width and let the content determine what exact width is appropriate. For example, our modals have min and max widths instead of sizes.
  • For some components, the page, context, and content will likely dictate where breakpoints make sense. For example, a data table would vary depending on what data is present.

When to use and when not to use

When to use
  • When the component has a particular layout at a particular size.
  • Use this component sizing with fixed width or fluid width components.
  • Let containers decide the exact size.
When not to use
  • For describing specific content such as body, heading, image, use those words instead of sizes (that is, don’t use “tall” to describe a heading when you could use “heading” or “square” to describe an image when you could use “image”)

External links

Here are some examples of other design systems: