This is an example of a Banner Image(s) with partial overlay and text
and this is placed in the Full-Width Region. This component can have one or more images.
It can also have text here, which can be left-aligned (default) or right-aligned.
This is a aight-aligned Banner Image(s) with partial overlay and text
This Component was previously named "Gradient Hero."
Text Areas and Typography Styles
Click your site's color palette from the left sidebar to see how each Component will look on your website.
Jump to:
Using the Text Area toolbar
Additional styling options
Using headings
Resources
Using the Text Area Toolbar
This is a Text Area component. It is the most commonly used component.
There are many different styles and features that you can use in a text area. Using the toolbar above the text box, you can make your text bold or italic.
Text can be left aligned.
Text can be center aligned.
Text can be right aligned.
Links can be incorporated seamlessly into text, and can be formatted in a variety of ways such as:
Files
External Links
Private Links
Arrows
You can also format links as Buttons:
Small Buttons ("Primary Button")
Different Small Buttons ("Secondary Button")
Horizontal lines can break up your text.
Text Areas can also include:
- Bulleted lists or
- Numbered lists
Although you can also add a Testimonial component onto your page, quotes can be added from the Text Area toolbar as well.
Images can be placed in a Text Area.
Various sizes are available: small, medium, large, or extra large.
Both scaled and square ratios are supported, and the alignment can be set to left, right or center.
Videos can now easily be embedded. Other elements (Twitter, Soundcloud and a few others as well. )
Additional text styling options
Text areas can include Splash Font - use sparingly to get attention
Or this Lead Font often used in the first paragraph on a page or first line in a story.
Text Areas can also include a Breakout Box which is text highlighted with a background color. This is great for quotes, reminders, or just calling out certain information within a page.
Short Line Length is another option: Using Short Line Length shortens a paragraph within the text area. It can be great for block quotes or other text that needs different formatting.
So are captions: Photographer 11 (caption)
and credits: ~By Sparkbox (credits)
Text can also be emphasized.
Heading Styles
Text Areas with different sections should include appropriate headings in line with Accessibility requirements.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Resources
Additional information, including step by step instructions for using the styles shown above can be found in our Drupal 9 Wiki Guide: