warning icon

The <Aside> component is a wrapper component that adds styling to make the text display smaller than the default body text; using body-long-01 and adds the correct top border styles.

It should only be used within a <Column> component with specific parameters. <Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>

Warning: If you use more than one <Aside> component on a single page, you need to provide an accessibility label so that someone using assistive technology can quickly understand the purpose of the landmark. See Mozilla Developer Network’s documentation for more information. Props for accessibility labels are described in the Props section below.

Example

With hanging rule

It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.

Without aesthetic, design is either the humdrum repetition of familiar clichés or a wild scramble for novelty. Without aesthetic, the computer is but a mindless speed machine, producing effects without substance, form without relevant content, or content without meaningful form.
– Paul Rand

Aesthetic is defined as the philosophical theory or set of principles governing outward appearance or actions.

Without hanging rule

Like our brand values, our design ethos must be palpable in everything we produce. Our philosophy and principles are for designers and non-designers alike–anyone authoring or authorizing any form of design on behalf of IBM.

They provide clear criteria for the conception, creativity and craftsmanship our brand demands and our clients deserve. The expression of our philosophy may evolve and expand over time, but our principles are designed to endure, ensuring everything IBM is distinctly IBM.

Code

With hanging rule

components/Aside/Aside.js
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
  <Aside>

**Good design is always good design.** What we borrow from our own design
history is not a mid-century aesthetic in stylistic terms, but the modernist
attitudes and approach used at the time.

  </Aside>
</Column>
Copy to clipboard

Without hanging rule

components/Aside/Aside.js
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
  <Aside hideRule>

A by-product of every experience with IBM should be time—time saved or time
well-spent.

  </Aside>
</Column>
Copy to clipboard

Props

property	propType	description
aria-label	string	Specify an `aria-label` value to provide a label to the inner aside element.
aria-labelledBy	string	Specify an `aria-labelledby` value that references the id of an existing element to serve as a label for the inner aside element.
children	node
className	string	Add custom class name
hideRule	bool	Hide the hanging rule

Edit this page on GitHub

Components: ArticleCard

Components: Caption