Do's and don'ts block
The do's and don'ts block component uses simple and matched visual elements and list view to advise rules in a particular situation. It helps draw attention to certain rules and allows users to scan and read easily for information on what they should or should do in a particular situation.
The components flexible layout allows for an addition images to support the text blocks as needed.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Containers
Demo
Configure: select the dropdowns below to display the variety of options that a do's and don'ts block supports.
Failure Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aenean eget eros suscipit, euismod leo in, pulvinar dolor.
- Etiam mattis mi mollis pulvinar condimentum.
- Ut non sapien aliquam, tincidunt lacus ut, commodo eros.
- Nulla eleifend massa ac magna porttitor viverra.
- Nunc ut nunc consectetur, accumsan dolor ultrices, volutpat est.
Usage best practices
Consider using the do's and don'ts block to:
- draw attention to one or a set of rules around a particular situation
- juxtapose a pair of rules to reinforce the understanding of a component usage
Having both the "do's" and the "don'ts" rules side by side creates a stronger impression when explaining the rules. However, the "dos" and the "don'ts" blocks can be used independently. Use the "do's" to reinforce good practices and use the "don'ts" to bring attention to detrimental actions.
Usage examples:
- to display the usage rules for components in the design system
- to show what can or cannot go into the blue and green carts
Related components:
Do
Use concise and clear language to point out a rule. Limit to 1-2 sentences.
Use a combination of "do's" and "don'ts" to emphasize a particular usage rule.
When using images, crop to the most relevant content.
Don't
Do not use the block for detailed explanation of guidelines.
Do not use a "Don't" when a "Do" is sufficient to explain the rule.
Do not use images that are not cropped or presented in a way that make a straight point.