Wondering what a header will look like? How about a table? Here's a reference for smaller parts of a page, such as headers, tables, buttons and more.

If you're new to Drupal or are a well-seasoned veteran that needs to show an invested party the possibilities, here's your stop.

Headings

Headings are a basic element of any webpage that provides the hierarchical structure to your content. They are numbered 1 - 6, starting with Heading 1 ranked as the most important. In Drupal, only 4 headings are available for content creators to use. Heading 1 is the for the site title and Heading 2 is for the page title. To create a clear visual and semantic hierarchy, only heading 1 and 2 can be used for these titles. 

Headers create structure in a page and should not be used to change the appearance of the text. Think of them as an outline that allows visitors to scan your page. Choosing proper headings is also important for accessibility. Screen readers will read the headings of the page, which allows people with visual disabilities to scan the page. Start with Heading 3 for your most important sections and work your way down from there. Only lengthy and complicated pages will use all the headings.

Heading appearance is controlled by the Pine theme. The font, colors, and sizes were chosen for accessibility, brand alignment, and visual appeal. 

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Ordered list:

  1. Use an ordered list when the sequence matters.
  2. List item
  3. List item

Unordered list: 

  • Use an unordered list for a bunch of items.
  • List item
  • List item

Links

Here is an example of a link

Table

Use tables only for data, not to create a layout. If you're looking to create columns on your page, then we recommend using paragraph bundles--there are 2 column and 3 column layout options. 

Factors to consider before creating a table:

  • Tables are less accessible than using paragraph bundles and/or CSS to create your layout. The accessibility department provides best practices for tables.
  • Tables are not as responsive than other Drupal elements. Tables will size according to the content inside them.
Header 1 Header 2 Header 3 Header 4
Table Row 1 Here's a table cell Here's another table cell Here's the last table cell
Table Row 2      

Buttons

There is a button for buttons! In the CKEditor, click on BTN and it will give you an option to style your button and add text.

Reserve using buttons for actions that a user can take. Button text length should be kept to a minimum, 3-5 words. It should describe what will happen when someone clicks or taps or it could be a call to action.

Icons

There are 2 icons sets available in the Pine theme: some of FontAwesome's repository and University Marketing icons.

Either set can be added to the CKEditor, however, it is best practice not to mix the two styles on the same page.

Did you create your own? Want to see them added to the icon picker?

Submit Your Icons

University Brand Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius venenatis lectus, non vestibulum sem venenatis et. Curabitur sodales efficitur pharetra. Vestibulum malesuada risus molestie quam posuere, non vulputate lectus rhoncus. Donec porttitor dolor aliquet erat rutrum, id egestas erat posuere. Suspendisse sed mattis erat, at ultricies felis. Maecenas porttitor commodo nulla, nec rhoncus tortor porttitor vitae. Integer fermentum ante imperdiet sem sollicitudin eleifend. Nulla ullamcorper imperdiet nisi nec mollis.

  

University Brand Icons

Morbi sed felis dignissim, faucibus augue eu, scelerisque nisl. Nunc pellentesque, odio eget semper congue, sapien ligula laoreet enim, ac aliquam mi erat sit amet enim. Mauris convallis in ex et malesuada. Integer pharetra nisi quis ipsum rutrum lacinia. Nullam condimentum urna diam, vel varius metus ultricies sit amet. Curabitur tincidunt mauris at lacinia convallis. Maecenas venenatis tempus elit. Integer eu arcu felis. Ut elementum enim sed rutrum malesuada. Donec erat quam, vestibulum sed magna ut, pharetra ultricies urna.

  

University Brand Icons

Nullam ut porttitor metus, a mollis nisi. Donec finibus ultrices turpis, eget fringilla nisi egestas a. Vivamus eget imperdiet leo. Nulla auctor dolor id justo mattis mattis. Nam ultrices, lorem eu ultricies aliquam, tortor lorem suscipit lectus, id malesuada felis sem vitae diam. Vivamus id felis risus. Fusce at suscipit diam, nec molestie neque. Mauris scelerisque interdum libero blandit tincidunt. Duis sed diam at metus luctus fringilla. Maecenas at laoreet quam. Nulla aliquet quam a condimentum dignissim. Phasellus dolor sem, laoreet id malesuada nec, rutrum eget tortor. Proin luctus risus orci.

Title Here

     

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ullamcorper diam et mauris convallis, ut ultrices mauris vestibulum. Donec sem velit, aliquam tincidunt sem et, scelerisque euismod neque. Vestibulum orci nibh, interdum vitae placerat et, tempor eu magna. Mauris at fringilla quam. Nullam sodales turpis ac mauris imperdiet, eu laoreet nulla cursus. Etiam faucibus velit erat, id vulputate ante lacinia accumsan. Fusce sed tempus lacus. Etiam bibendum sed sem non rutrum.

Title Here

    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla eu justo in faucibus. Nulla facilisi. Pellentesque in elementum erat. Nullam ultricies dignissim dapibus. Proin sem erat, aliquam vel posuere at, cursus eu dui. Aenean condimentum quam ac consectetur feugiat. Cras euismod nibh et diam scelerisque, ut congue lorem varius. Pellentesque pretium libero eget urna condimentum semper. In vel tortor id nisl tristique posuere vitae at nisl. Duis viverra, felis at sollicitudin dapibus, turpis augue tempor risus, ac lobortis ipsum eros at nisl. Vestibulum hendrerit, risus eu ultricies tempor, justo arcu lacinia ligula, ac faucibus ex lorem quis arcu.

 

Title Here

Nullam rutrum augue vitae nunc egestas, id consequat enim tempor. Morbi vitae diam metus. Aliquam erat volutpat. Ut commodo tincidunt leo, ac consectetur ex mollis ac. Duis fermentum purus a dignissim dignissim.

   Link Text

Font Awesome Icon

   

  • Nam rhoncus nulla pellentesque ligula imperdiet, in pulvinar ex facilisis.

  • Curabitur vitae dolor fermentum, gravida dui non, aliquam nibh.

  • Quisque pulvinar nunc et ultrices luctus.

Font Awesome Icon

 

It is not recommended to place icons at the bottom of text, whether you're using paragraphs or lists. The icons won't line up at the bottom and will appear in different locations depending on the screen size. 

Font Awesome Icon

    

  • Sed ut nunc in purus pharetra faucibus a vitae neque.

  • Vivamus tincidunt libero sit amet enim malesuada placerat.

  • Morbi laoreet odio in libero fermentum, in varius diam molestie.