Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About
  • Foundation
    • Overview
  • Visual foundation
    • Colors
    • Content density
    • Data visualization colors
    • Design tokens
    • Iconography
    • Layout
    • Motion
    • Spacing
    • Theming
    • Typography
    • Visual context
    • Visual modes
    • Visual style
  • Core principles
    • Accessibility
    • Responsive design
  1. Cloudscape Design System
    • Foundation
    • Visual foundation: Content density

    Content density

    Content density is defined by the ratio of information visible compared to the space available in the interface.

      On this page

      • Density modes
      • Density scale
      • General guidelines
      • Implementation and demos
      • Related pages

      Density modes

      When you provide multiple density options, users can adapt the amount of content shown on the screen based on their needs and preferences. Some users might find it easier to complete their tasks by having larger spacing that increases distinction of content, while others might prefer smaller spacing and more content that is visible at a glance.

      Cloudscape supports two density modes: comfortable and compact.

      Comfortable

      Comfortable is the standard density level of the system, active by default. It optimizes content consumption and readability, as well as cross device experiences.

      Compact

      Compact is an additional density level for data intensive views. It increases the visibility of large amounts of data by reducing the space between elements on the screen.

      Density scale

      Comfortable and compact modes are built using the 4px base unit of the spacing system. In compact mode, the spacing scale is reduced in increments of 4, decreasing the vertical spacing inside components (paddings) and the vertical and horizontal spacing between components (margins).

      Spacing inside components

      Comfortable scale applied to table component

      Compact scale applied to table component

      Spacing between components

      Comfortable spacing

      Compact-scaleCompact-scale

      Compact spacing

      Principles

      Consistency

      To ensure consistent and predictable experiences, compact mode is designed and implemented to propagate the reduced spacing scale to all components, in all view types. This allows for customization of the density level in few steps, avoiding burden on users.

      Flexibility

      Users are in control of choosing their preferred level of density within a service. The density scales alter the perception of information visible in the screen, for example a page in compact mode might be perceived as overwhelming for some users, and pleasant for others - the same page in comfortable mode might be perceived as with excessive white space for some users, and as nice balance between content and space for others.

      Readability

      When reading help content, browsing on-boarding documentation and getting started, or fixing errors within a form, users need to focus on reading. To help users make decisions without compromising content readability the compact scale is not fully applied to informational components such as help panel, alert, flashbar, and form validation messages.

      Interactivity

      When interacting with elements that are contained in a limited real estate, or when focusing on pointing and selecting, space is not a constraint. To not hinder their experience the compact scale is not fully applied to elements with limited target space such as dropdowns in select, multiselect, autosuggest, date picker, and in data visualisation components. It is instead optimised for full page, data intensive views, such as dashboard, resource list, and resource details.

      General guidelines

      Do

      • Always set comfortable mode as default. Comfortable mode is the default density level of Cloudscape. Compact mode can hinder readability, overwhelm, and prolong content consumption.
      • Ensure users can always switch between comfortable and compact mode. Follow the guidelines for density settings.
      • Ensure a consistent experience within your service and across regions. Comfortable and compact mode are applied to the entire service or sub-service, and in all regions.

      Don't

      • Compact mode does not replace comfortable mode. Always provide comfortable mode. 
      • Don’t apply compact mode to individual pages or standalone components of your service, unless the component specifically offers that capability. For an example, refer to the table component contentDensity property.

      Implementation and demos

      Implementation guide

      1. Custom components:
      To benefit from the compact mode in your custom components, use the box and space between components. You can find more information in our spacing article.

      2. Adjust child iframes:
      Child iframes do not inherit css styles of the parent page automatically. Therefore, in order to be compact mode compliant, they need to have the class name applied separately.

      Browser support

      Compact mode is based on CSS custom properties  (also known as CSS variables). Old browsers, including IE11, do not support   CSS variables, therefore switching to compact mode won't work in IE11.

      Demos

      To see an example of the density settings pattern implemented, see the dashboard demo. To see compact mode in-action, check out the following demos:

      • Table view

      • Details page

      • Details page with tabs

      • Single page create

      • Card view

      Related pages

      Density settings

      With the density settings pattern, users can define the preferred density level of the content visible within the interface. 

      Table

      Presents data in a two-dimensional table format, arranged in columns and rows in a rectangular form.
      • About
      • Connect
      • Privacy 
      • Site terms 
      • © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
      Made with love atAWS