Drupal Cloud
Organizing & Navigating Content
Go beyond plain text using Drupal Cloud's component system to elevate a site's structure and navigation. The benefits and features of each component improve the presentation of the content and enhance user interactions. Explore how components can make webpages both engaging and user-friendly.
Structuring Content with Textual Elements
Structuring Content with Textual Elements
Create informative and action-oriented textual elements to support SEO and enhance accessibility. Incorporate relevant keywords to improve search engine rankings and ensure your content is accessible for screen readers.
Transform Content with Typographic Elements
Improve user experience by avoiding large blocks of text and effectively structuring and formatting your text. Present concise, relevant information organized into scannable, bite-sized sections and enhance value by linking to authoritative sources.
Typography
Essential for both accessibility and SEO, proper text formatting improves navigation and readability for users, especially those relying on assistive technologies. Additionally, structured text allows for better indexing, increased visibility and improved search engine rankings.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Inline quotations within a paragraph
Larger, block-level quotations that stand apart from the surrounding text
Buttons Styles
Buttons can serve as stand-alone links. Mix and match size and style options while maintaining a consistent style, and cohesive look and feel throughout the site.
Bulleted and Numbered Lists
There are several ways to style lists.
- This is a bulleted list
- Nullam ex lacus
- Porta dapibus tincidunt non
- This is a numbered list
- Nullam ex lacus
- Porta dapibus tincidunt non
Two-column List
- Two-column list
- Ut tempor arcu eget
- Eros lobortis elementum sed sodales placerat tellus, id commodo orci efficitur vitae
- Phasellus pretium sapien
- Mauris eu venenatis
- Arcu dictum vitae libero sit amet libero at, commodo rutrum neque
- Aliquam erat volutpat
- Mauris vitae ornare metus
Three-column List
- Three-column list
- Eros lobortis elementum sed sodales placerat tellus, id commodo orci efficitur vitae
- Ut tempor arcu eget
- Phasellus pretium sapien
- Mauris eu venenatis
- Aliquam erat volutpat
- Arcu dictum vitae libero sit amet libero at, commodo rutrum neque
- Mauris vitae ornare metus
List Block
- List block with regular spacing
- Eros lobortis elementum sed sodales placerat tellus, id commodo orci efficitur vitae
- Ut tempor arcu eget
- Phasellus pretium sapien
- Mauris eu venenatis
- Aliquam erat volutpat
- Arcu dictum vitae libero sit amet libero at, commodo rutrum neque
- Mauris vitae ornare metus
List Block: Link Group
- Lorem ipsum dolor sit amet
- Eros lobortis elementum
- Ut tempor arcu eget
- Phasellus pretium sapien
- Mauris eu venenatis
List Block: Animated Link Group
Multi-column Content (CSS Grid)
Columns enhance readability, improving visual appeal, making content easier to scan and allowing for more engaging layouts.
100% Column
50% Column
50% Column
75% Column
25% Column
25% Column
75% Column
33% Column
66% Column
66% Column
33% Column
33% Column
33% Column
33% Column
25% Column
50% Column
25% Column
25% Column
25% Column
50% Column
50% Column
25% Column
25% Column
25%
25%
25%
25%
20%
20%
20%
20%
20%
Tables
Table are used to display tabular data on a webpage (i.e., rows and columns of data) and Drupal Cloud automatically formats the table to meet accessibility standards.
| Heading 1 | Heading 2 | Heading 3 | |
|---|---|---|---|
| Heading A | Data A1 | Data A2 | Data A3 |
| Heading B | Data B1 | Data B2 | Data B3 |
| Heading C | Data C1 | Data C2 | Data C3 |
Primary Heading for Clear Readability
Headings divide content into manageable, visually distinct sections to enhance readability and organization. With clear separations between different content areas, users are better able to navigate and understand the page content.
Secondary Heading for Better Structure
Structured headings improve content organization and make it easier for search engines and screen readers to navigate and understand your pages.
Presenting Content with Card/List Group Components
Presenting content with the Card/List Group Component
The Card/List Group component displays pages as either cards (images in a grid) or lists. This component offers various styles and variations to suit different needs.
Image cards make your content visually engaging and easy to navigate
Image cards display images in a grid layout. They are ideal for highlighting key pages with accompanying visuals. Image cards are versatile, offering several variations for presenting content to suit your needs. Available options: 2 Up, 3 Up, 2 Up as a Carousel, and 3 Up as a Carousel.
Component: Card/List Group > Image Cards - 2 Up as a Carousel
Summarize the key points or benefits with concise descriptions.
Guide users towards desired actions and create accessible experiences for all audiences.
Present important information in a structured and eye-catching manner.
Component: Card/List Group > Image Cards - 3 Up
Summarize the key points or benefits with concise descriptions.
Guide users towards desired actions and create accessible experiences for all audiences.
Present important information in a structured and eye-catching manner.
Lists display content in a clear and readable format
Lists are ideal for presenting information in a structured manner, making it easy for users to scan and find what they need. Available options: List - Highlights, List - Highlights - No Images, List - With Peeks, List - With Peeks - No Images. Each option can “show all” on page load.
Text cards display concise text snippets in a grid layout
Text cards are perfect for summarizing information, highlighting key points or providing quick overviews of related content. They enhance readability and organization. Available options: Text Cards - 2 Up and Text Cards - 3 Up.
Component: Card/List Group > Text Cards - 2 Up
Encourage user interaction and guide them to additional content.
Choose content that is important and relevant to the user.
Presenting Content with the Poster Component
Presenting content with the Poster Component
Poster component displays images alongside text to highlight content and enhance the webpage’s design. It is ideal for showcasing other pages, news updates, or stories. It creates a dynamic and engaging presentation that captures attention and improves the user experience.
Posters integrate high impact visuals and text for webpages
Poster components make the content more engaging and impactful. They can display a wide range of content to enhance webpages. Available options: Poster Layout 1, Poster Layout 2, and Poster Layout 3. (Can be used as External Page Poster, Internal Page Poster, News Poster and Story Item.)
Bold headlines grab attention and convey the essence of the content
Concise and compelling intros provide a clear overview or teaser that encourages users to explore further. Highlight key benefits, news updates, or stories that resonate with your audience.
Compelling headlines provide guidance and engage the user
Brief, engaging summaries of the latest updates, news, pages or stories. Highlight key points and intriguing details to encourage your audience and encourage them to explore further. Concise text complements the accompanying visuals.
Presenting Content with the Call to Action Component
Presenting Content with the Call to Action Component
A CTA component prompts users to take a specific action, such as visiting a page. Its primary purpose is to guide users toward a desired outcome by clearly presenting the action to be taken. By making the call to action prominent and compelling, a CTA component helps drive user engagement, leading to increased interactions.
How to Add Call To Action Component
Singular calls to action drive user engagement
The Call to Action - Single Link component directs users to specific pages or resources through a single, clear action. It focuses on a single, well-defined goal, such as encouraging users to learn more. Designed to focus the user's attention on one key action, making it straightforward for them to follow through and engage with the content. Available options: Image Options - No Image, Align Left, Align Right. Background Color - None, Red and Gray, Red and Brown, White.
Action-oriented and inviting title
The caption provides context and creates a sense of urgency for actions the user could take.
Multiple actions from a single component
The Call to Action - Multiple Links component allows for several links, each leading to a different resource. They guide users towards various options, making it easier for them to explore a range of content or take multiple actions based on their interests. Available options: Image Alignment - None, Left, Right. Remove Background Color.( )
Titles that create a sense of discovery and opportunity
Captions suggest that a wealth of valuable information is available and that users benefit from exploring multiple resources.