Atomic content

Content is more than its container—it’s information and ideas in service to its user. Instead of thinking about content in terms of web pages filled with text and components like carousels, what if we separate the info from its display?

Atomic content design makes content modular by breaking it into small yet meaningful units of information. When elements like titles, headings, and bylines are treated like data, we can separate them from a specific display or component. Content is now free for movement and becomes reusable across any appropriate configuration or context.

In a design system context, atomic content means identifying units of information, and forming an opinion on how they should scale and be styled across the width of their parent container. We achieve this with fluid typography scales and container queries—the fluid scale handles how your content responds to different devices and screen sizes. So, an atomic content element like a “title” is a “title” no matter where it's placed.

What this unlocks:

• Supports using atomic content elements as building blocks to create larger content structures
• Reduces the need to recreate content elements for different layouts or platforms

For example, we can pair a title consistently with another element like a kicker, defining their spacing and style. This composite pair is then standardized for reuse across any component that requires a title and kicker, like a product card.

With atomic content, we can work from the same set of pre-defined styles, normalizing design decisions and speeding up work.

Using atomic content within a responsive container

Let's look at an example of how CdrTitle, an atomic content component, reacts to the responsive width of a card within an auto-flowing grid.

Cards

Atomic title

Atomic title

In atomic content’s next phase, we can establish a connection with our headless Content Management System (CMS). By defining schemas for our content elements, we can create combinations of elements that follow a standard structure.

Why this is cool for content authors:

• By mapping information structures to Cedar schemas within the CMS, they can import Cedar’s specific style instructions
• Design decisions become automated with predefined layouts that flex to accommodate whatever content an author wants to display

Stay tuned for more atomic content updates in future Cedar releases.