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.

It can have a button

This is a aight-aligned Banner Image(s) with partial overlay and text

This Component was previously named "Gradient Hero."

Switch color palette

Click on your color palette below to match this page's appearance to your site

Canyon

Cardinal

Cliff

Lake

Mountain

Ocean

Confused?

If things look different on your site, you must be on the Traditional theme. Visit the Traditional reference site.

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:

Big 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: