The text component will likely be the most used component in your content. It is pre-loaded on basic 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 a toolbar with icons that let you format your text to: 

  • Bold and italicize 
  • Insert subscripts or superscripts 
  • Insert hyperlinks to other content or documents 
  • Create bulleted or number lists 
  • Add a quote to your text
  • Insert a table 
  • Insert an image or video 
  • Insert a horizontal line


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 for selection until you have selected the appropriate type of text.