The “List Block” component allows you to emphasize important information through a clean, bulleted list paired with an image. This component has options to adjust the image position, background color, and minimum height to suit your content needs. Use this component when you want to draw attention to key points in a visually engaging way.
Example
This is a title
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content Options
The List Block has 3 main options for content:
- A heading (optional)
- An image (optional, but recommended)
- A drop area for more components. The drop area is intended to house a Text Component, though, theoretically, it could contain any component.
This component has no title.
This component has a title, but no other text content
Layout and Styling Options
Reverse
Reverse: Off
- Lorem
- ipsum
- dolor
- sit
- amet
Reverse: On
- Lorem
- ipsum
- dolor
- sit
- amet
Background Color
Background color: White
- Lorem
- ipsum
- dolor
- sit
- amet
Background color: Muted (grey)
- Lorem
- ipsum
- dolor
- sit
- amet
Background color: Primary (brand red)
- Lorem
- ipsum
- dolor
- sit
- amet
Background color: Secondary (teal/blue)
- Lorem
- ipsum
- dolor
- sit
- amet
Background color: Tertiary (dark grey)
- Lorem
- ipsum
- dolor
- sit
- amet
Background color: Gradient
- Lorem
- ipsum
- dolor
- sit
- amet
Minimum Height
Minimum Height: 200px
- Lorem
- ipsum
Minimum Height: 400px
- Lorem
- ipsum
- dolor
- sit
- amet
Minimum Height: 600px
- Lorem
- ipsum
- dolor
- sit
- amet
Minimum Height: 800px
- Lorem
- ipsum
- dolor
- sit
- amet
Minimum Height: 1000px
- Lorem
- ipsum
- dolor
- sit
- amet
Bottom Margin
Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: X-Large
the end
Top Margin
Top Margin: None
Top Margin: X-Small
Top Margin: Small
Top Margin: Medium
Top Margin: Large
Top Margin: X-Large
the end
Usage
Do
- Ensure the image you choose complements the content of your list and enhances the overall message.
- Position the image thoughtfully, considering how it balances with the text for optimal readability.
- Use the background color to create contrast, making sure the text remains legible.
- Keep the bulleted list concise, focusing on key points to avoid overwhelming the reader.
- Adjust the minimum height to ensure the component fits well within your page layout.
Don't
- Avoid using images that are too large or distract from the list content.
- Refrain from overloading the List Block with too many bullet points, which can overwhelm readers.
- Avoid placing the List Block too close to other components that have similar content to prevent redundancy.
- Refrain from using low-resolution images that appear pixelated or blurry.
- Don’t place important information in the List Block that could be overlooked due to the nature of bulleted lists.
- Avoid setting the minimum height too large, which can create excessive white space that disrupts the overall page design.
Accessibility
- Ensure that you provide suitable alt text for the images on your cards. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.
Note The Alt text field is currently missing, but will be added soon.