The text component will likely be your most used component on your webpages. It is actually pre-loaded on a few content types but can be removed if not needed. The text component functions much like a Word or Google doc where you insert text into the open text area and then you have icons across the top that let you format your text to: 


You’ll also see two dropdowns: Format and Styles.  


Format

Format is used to designate your content’s section headers. Think of headers like an outline. The title is the top of the outline and is a Header 1. Therefore, the header in your main content area will start as a Header 2 and the number will increase the more levels it goes. For accessibility, and a good user experience, don’t skip headers. In an outline you’d need a sub-bullet 2 in order to have a sub-bullet 3. The same goes for websites. Below is an example of this outline structure:  

  • Title (Header 1) 
    • Subheader (Header 2) 
      • Subheader (Header 3) 
    • Subheader (Header 2) 
      • Subheader (Header 3) 
        • Subheader (Header 4) 


The text that isn’t a section header is the normal format. 


To use the section headers in the Format dropdown, select the text you want to turn into a section header and then select the appropriate header number from the Format dropdown. You only need to select section headers when using the text editor, or what Drupal calls a WYSIWYG (What You See Is What You Get). We have the section headers pre-built into the components in the other scenarios.


Style

The Style dropdown provides some additional formatting options for your content like creating 3 columns, stylizing quote text, making a link a button, and adding an intro text styling for the first sentence or two on a page, etc.  


To use these styles, select the text you’d like to implement the style on, then select the style from the dropdown. Certain styles may not be available in the dropdown until you have selected the text. Additional styles will display if you have selected bulleted or numbered lists.