atomic content

Content building blocks with pre-defined, fluid styles

import { CdrAbstract, CdrKicker, CdrTitle } from '@rei/cedar'

Atomic content components represent common content elements and structures intended to align to external content models. They include codified opinions of how type should scale and be styled within the width of their parent container.

Type	Purpose
`CdrAbstract`	Use a summary for a content composition (i.e. what is this article about?)
`CdrKicker`	Use above a title or a heading to categorize or capture interest
`CdrTitle`	Use as the distinguishing name for a content composition (e.g. article title, product title)

Usage

Abstract

When to use

Providing a brief summary

When not to use

Displaying large bodies of text

Kicker

When to use

Displaying the group or category name of a content object
Representing the category or group in one line consisting of one or two words
Depicting a larger content grouping for the content object's category

When not to use

Adding unique content to a content object
Adding a category that would be too long to display in one line
Creating a badge that represents a state rather than a group

Title

When to use

Displaying the title of a content object such as a product, class, or article
Adding to any location where you are displaying the content object's title, such as a card or article page

When not to use

Creating content which describes a section or heading of a page

Accessibility

What Cedar provides

A tag prop to assign the appropriate semantic element to the atomic

Development responsibilities

When using this component, here's what you are responsible for:

Being mindful of zoom levels when using atomics in smaller constrained containers. Because fluid type use the CSS clamp() function, it's possible to prevent text from scaling to 200% of its original size, which is a violation of WCAG under 1.4.4 Resize text (AA)
Ensuring your containers will scale with zoom levels as well to help address the issue

Implementation

Using atomics within a responsive container

In the following example, we've placed a variable number of cards within an auto-flowing grid. Watch how the card's atomic title adjusts to the number of cards in the grid as well as the size of the viewport.

CdrCard is defined as a container so the CdrTitle is reacting to the responsive width of the card within the grid.

Cards

Atomic title

<template>
  <CdrGrid class="example-filmstrip">
    <CdrCard
      v-for="n in count"
      :key="n"
    >
      <CdrImg
        src="/rei-passage-2-tent.jpg"
        alt="An REI tent"
      />
      <a
        class="cdr-card__link"
        href="#"
      >
        <CdrTitle>Atomic title</CdrTitle>
      </a>
    </CdrCard>
  </CdrGrid>
</template>

<style>
.example-filmstrip {
  grid-auto-flow: column;
}
</style>

API

View on GitHub

CdrAbstract

Props

Name	Type	Default
tag Sets the HTML tag (p, span, h1, h2, etc)	string	'p'

Slots

Name
default

CdrKicker

Props

Name	Type	Default
tag Sets the HTML tag (p, span, h1, h2, etc)	string	'span'

Slots

Name
default

CdrTitle

Props

Name	Type	Default
tag Sets the HTML tag (p, span, h1, h2, etc)	string	'h1'

Slots

Name
default