Sample Text Components
Text components
Text components are the most widely used component on the site. They are extremely flexible and can be combined together or with other components to create endless designs.
A component can have two heading levels and a body-size text block
This is the subhead
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nulla porta dolor. Ut varius tincidunt libero. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Nulla facilisi.
The heading field is H2 by default
When used below an H2, the subhead is an H3
Heading level four
In a section subordinate to an H2 and H3, the Subhead field is used to create an H4. To do this, leave the Heading field empty and select H3 in the Heading Size dropdown. Put your H4 text in the Subhead field.
Heading level four
In a section subordinate to an H2 and H3, the Subhead field is used to create an H4. To do this, leave the Heading field empty and select H3 in the Heading Size dropdown. Put your H4 text in the Subhead field.
If the Heading Size is set to H3, the Subhead will be an H4
This is the subhead when the Heading is set to H3
Body text remains the same size. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus dolor. Sed in libero ut nibh placerat accumsan.
Larger blocks of text should typically be left-aligned for better readability
Curabitur ullamcorper ultricies nisi.. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus quis mi. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Ut non enim eleifend felis pretium feugiat. Phasellus gravida semper nisi. Praesent congue erat at massa. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Nullam vel sem. Morbi ac felis. Aenean imperdiet. Sed libero. Quisque ut nisi. Praesent ac massa at ligula laoreet iaculis. Fusce fermentum.
Large-text sections are usually left-aligned too
This is a common pattern for page intro sections.
Aenean massa. Phasellus consectetuer vestibulum elit. Donec id justo. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce egestas elit eget lorem. Sed hendrerit.
Section headings that stand alone or have child sections are typically centered
Text components in three columns
When the body text is fairly brief, centered columns may be used. Praesent turpis fusce vulputate eleifend sapien. Praesent nec.
Text components in three columns
When the body text is fairly brief, centered columns may be used. Praesent turpis fusce vulputate eleifend sapien. Praesent nec.
Text components in three columns
When the body text is fairly brief, centered columns may be used. Praesent turpis fusce vulputate eleifend sapien. Praesent nec.
Sections may stand alone with no subordinate content. In this case, they are usually important callouts or calls to action and are typically placed on a bold-colored background.
Icons can be used to provide emphasis or visual interest
Drupal contains an icon library but custom icons can be uploaded
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Text components are often used with images
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Text component with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam imperdiet imperdiet orci. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.
Components can have up to four links
Links can point to webpages and files. They can also open video players or forms in modal windows. Links can also be placed on text inside of the body. Links on body text can only link to webpages and files.
The style of links differs, depending on the background color and number of links
Text component with only one link
With one or two links, they display as buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Two links on dark blue background
Buttons can be red or blue, solid or outline — style is automatic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor .
Three to four links display as text
Quisque id mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Fusce fermentum. Phasellus dolor.
Text components with images can be used in 1-column sections but this is rarely done
In this case, text should normally be left-aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Dos and Don'ts
If you are creating custom icons
Ask how to build your SVG in order to use coloration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
You must use the heading field or it won't align
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
Center alignment causes odd spacing
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
Text components in multiple columns are not equal height
To create equal height text components, use a Grid component instead
Height depends on content
Praesent congue erat at massa. Phasellus magna. Praesent congue erat at massa. Phasellus magna.
Height depends on content
Praesent venenatis metus at tortor pulvinar varius. Pellentesque commodo eros a enim. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris. Praesent venenatis metus at tortor pulvinar varius. Pellentesque commodo eros a enim. Proin viverra.
Multiple links may not look good
Proin magna. Suspendisse potenti. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nam adipiscing.
Lengthy text is not recommended in multi-column sections
Proin pretium leo ac pellentesque
Praesent nec nisl a purus blandit viverra. Aenean massa. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Nullam vel sem. Pellentesque ut neque. Praesent nec nisl a purus blandit viverra. Aenean massa. Pellentesque egestas, neque sit. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Morbi mollis tellus ac sapien. Suspendisse potenti.
The Grid
The Grid component equalizes the height of 2 or more text components. Using the Grid, CTA buttons can be aligned horizontally even when their component content varies in length.
Quisque libero metus
Nunc nec neque. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Phasellus ullamcorper ipsum rutrum nunc. Nam pretium turpis et arcu. Nulla porta dolor.
Phasellus ullamcorper ipsum rutrum
Aenean massa. Pellentesque auctor neque nec urna. Cras varius. Phasellus ullamcorper ipsum rutrum nunc. Phasellus gravida semper nisi. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Fusce a quam. Vivamus quis mi.