Getting Started
You can learn more about our use of colors—including why we limit the number of colors we use in text—and fonts—including why we limit our fonts to United and Source Sans—on design and layout in the Getting Started section of Drupal Basics.
Visit the Content section of Drupal Basics to learn about the editing tools available through the Drupal Content Editor.
Adding Headers
About Headers
Think of headers as the outline of your page. They should be arranged to show the hierarchical ordering of information from the broadest and most important (Heading 2) to secondary information that supports the information in your Heading 2 (Heading 3) to the most specific information that supports the information in your Heading 3 (Heading 4).
Like an outline, you should always start with most important — Header 2 — with your Header 3 information below that and your Header 4 information below your Header 3 information. Do not skip levels — don't start with a Header 3, or go straight from a Header 2 to a Header 4. You can go from a Header 3 or a Header 4 back to a Header 2 when you switch broad topics.
As a general rule, we recommend that you do not apply bold or italics to your headers as they already have a bold style applied to them and the italics should only be used in specific use cases.
Accessibility in Practice
For screen reader users, header tags are vital in giving a sense of the main topics of the page and enabling easier navigation through your content. Think of your headers as a table of contents for your page for both screen reader software and your users. Additionally, effective header tags help with search engines — making your site more accessible to everyone.
Examples of Header Formats:
Header 2
Header 3
Header 4
Header 5
Header 6
Example of How to Use the Header Formats:
United States (Header 2)
This information is about the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Oregon (Header 3)
This information is about the state of Oregon in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Eugene (Header 4)
This information is about the city of Eugene in the state of Oregon in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
California (Header 3)
This information is about the state of California in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
San Francisco (Header 4)
This information is about the city of San Francisco in the state of California in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Canada (Header 2)
This information is about the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
British Columbia (Header 3)
This information is about the province of British Columbia in the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Vancouver (Header 4)
This information is about the city of Vancouver in the province of British Columbia in the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Add Headers
To style headers for your body copy, highlight the text you want to format and click on the button that says “Normal” on the toolbar. That will give you a drop-down menu. Scroll down and select from Heading 2 or Heading 3 or Header 4.
Be sure to use “header” tags (H2 for major headings, H3 for subheadings, H4 for sub-subheadings) to separate sections rather than just bolding the text.
Adding text above or below a Grid or other non-standard item
When working around your grids or other template items you may need to add text above or below that item. As an example, when there are two grids or templates adjacent to each other and you want to add a horizontal line between them.
To add a new text paragraph above or below your grid or other template item, you will need to use the “insert paragraph” option shown here as a red line and red box with a left curved arrow:
To add spacing between two grids or template items when editing your content, click near where you want to add the new paragraph space and place your mouse cursor above or below the grey box where you want the extra space added and the red line and a red box with a white arrow will appear:
Click on the red box with the arrow and it will add a new paragraph space where the red line is shown.