Content Block Simple
Content block simple works well as an introductory section on a page by providing a clear starting point for the user. By default, this component works the best as at the top of the page and includes a heading, introductory paragraph, optional media (image or video), optional CTA (call-to-action), and a horizontal rule at the bottom before the next component.
A variation of this component brings in aside elements and can introduce navigational quick links on the right side on desktop. You can see the aside element at work in the Content block media component directly below this one.
Content block media
Content block media is used to spotlight an image or video in the content of the page. It starts with a brief overview (this text) before presenting an image or video, and any details you want to pull out below that. Optionally, combine with a link or card element.
Introduction to the media
Aside elements
Note that this component is using the variation that includes an aside element (in this case, a link list) along the right side of the page on desktop. This can be used to highlight key links and allow the user to jump to content that is most relevant in the moment.
Combining Content block elements
You can check the design specs to get a sense of how to combine these content block components to create a cohesive story. Pair Content block media content together to break up content or segue into another component for impact.
Scroll animations
This page uses the Scroll up scroll animation on every section of the page content. Thoughtful use of animations can highlight key content and draw the user’s attention. You can find more examples of scroll animations in our Storybook.
”
Speaker’s name
Additional info such as title or company
Content Group Pictograms
This component is used to present a group of information, each with a supporting pictogram. Use this to break up otherwise dense content with images for a better and more scannable reading experience.
Pictograms in action
IBM’s pictograms are visual symbols used to represent ideas, objects or narratives. They can communicate messages at a glance, afford interactivity, and simplify complex ideas. They work well with presentations and marketing communications.
Finding pictograms for your page
The IBM Design Language site houses many pictograms you can use for your project, and includes instructions on creating a custom pictogram. Only the productive pictogram set are used in these sections.
At least three pictogram sections
The Content group pictogram component should always include at least three pictogram sections. If you have less than two sections worth of content, consider another component.
Content group cards
Content group cards is used to present information through a group of cards with each acting as a call to action that drives to additional or supporting destinations. It is suitable for adding concise buckets of content and links to a long-form reading.
Logo Grid
Card section
CTA Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit ullamco laboris nisi ut aliquip ex ea commodo consequat
Secondary subsection
Consists of two paragraph lists and is used to provide information and links to additional destinations.
Usage
Use the secondary area to connect users to additional destinations if more than the primary is needed.