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 and is usually the page title.
There is now an option to remove the page title that is produced automatically by Drupal. You can replace with a Heading 1 in Layout Builder or the Body field.
However, it is important to keep a heading 1 at the top of your page for SEO and accessibility.
If missing, this will severely impact your web page's ranking in organic searches.
Whether you use the automatically produced title by Drupal or a Heading 1 in the top Layout Builder section of the page, it doesn't matter, but it needs to be there.
The homepage of your website, example.oregonstate.edu, will have a heading 1 in the header of the website. It will be the in the header of the website, next to the OSU logo. Here is where the heading 1 for https://drupal.oregonstate.edu/ will be located:
Top level group pages will have a heading 1 in the header of the website, next to the OSU logo and under the site title. Using the Site Building Guide group as an example, the screenshot below shows its location.
Headings 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 low/no vision to scan the page. Only lengthy and complicated pages will use all the headings.
Heading appearance is controlled by the theme. The font, colors, and sizes were chosen for accessibility, brand alignment, and visual appeal.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Sic consequentibus vestris sublatis prima tolluntur. Non pugnem cum homine, cur tantum habeat in natura boni; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Cur post Tarentum ad Archytam? Duo Reges: constructio interrete. Quae similitudo in genere etiam humano apparet.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Sic consequentibus vestris sublatis prima tolluntur. Non pugnem cum homine, cur tantum habeat in natura boni; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Cur post Tarentum ad Archytam? Duo Reges: constructio interrete. Quae similitudo in genere etiam humano apparet.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Sic consequentibus vestris sublatis prima tolluntur. Non pugnem cum homine, cur tantum habeat in natura boni; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Cur post Tarentum ad Archytam? Duo Reges: constructio interrete. Quae similitudo in genere etiam humano apparet.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Sic consequentibus vestris sublatis prima tolluntur. Non pugnem cum homine, cur tantum habeat in natura boni; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Cur post Tarentum ad Archytam? Duo Reges: constructio interrete. Quae similitudo in genere etiam humano apparet.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Sic consequentibus vestris sublatis prima tolluntur. Non pugnem cum homine, cur tantum habeat in natura boni; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Cur post Tarentum ad Archytam? Duo Reges: constructio interrete. Quae similitudo in genere etiam humano apparet.
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Sic consequentibus vestris sublatis prima tolluntur. Non pugnem cum homine, cur tantum habeat in natura boni; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Cur post Tarentum ad Archytam? Duo Reges: constructio interrete. Quae similitudo in genere etiam humano apparet.
Display Font Sizes
The display sizes dropdown can be used to emphasize text and provide you with more text and font sizes. They should not be used to replace using the heading system and sectioning out your page appropriately. Headings allow people who rely on screen readers to skim a page by having the screen reader read the headings out loud.
Display Size 1
Display Size 2
Display Size 3
Display Size 4
Display Size 5
Font Sizes
There are now different font sizes of our standard Open Sans body font that you can use. These can be used for emphasis with text.
Font size 6 is the default body copy size to if you want to revert back.
Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font size 6 (regular body copy size)
Font size 7 (smaller than body copy for captions or photo credit)
Text Color
Since we provide an option for a dark background, you can change the text to white. This isn't done automatically, so if you change the background color for a section or block, you need to change the text color as well.
Readability note: do not use a pure black background (#000) with pure white text (#fff). While this will produce the highest contrast ratio, this isn't best practice. The stark contrast makes the text less legible and creates a stark look that doesn't fit within the brand. Use #212529, our dark background brand color.
Dark Background with White Text
Lorem ipsum dolor sit amet. In cupiditate porro 33 odit atque ut impedit assumenda et tempora iste ut neque adipisci et voluptas nesciunt? Ex obcaecati sequi est corrupti nemo in delectus omnis cum ipsa sunt.
Eos ducimus sint eum optio mollitia aut nesciunt dolor et laboriosam expedita rem perferendis quasi qui placeat culpa? A pariatur rerum est velit rerum At iusto molestiae cum quod repellendus id dolorem aperiam. Ad exercitationem dicta At fugiat nobis et laborum minima qui repellendus necessitatibus aut mollitia quibusdam aut omnis natus qui quod nesciunt.
Et quisquam numquam et quos enim aut facilis quidem ut reiciendis sapiente est delectus consequatur. Rem rerum minima aut deserunt veritatis eos iste nemo sed quibusdam molestiae a quia itaque.
Ut velit voluptatem ea maiores ullam vel pariatur optio eos repellendus enim. Aut commodi nesciunt ad quia error aut aperiam reiciendis sit cumque quae nam sunt consequatur! Qui reprehenderit consequatur cum consequuntur nisi qui dolores autem sit molestias accusantium.
Text Over Images
It is now an option to place text directly over a background image or video. There needs to be enough contrast between the text and the background to ensure legibility. It's best to pick a photo that isn't very busy so that it's not competing with the text. You can darken or lighten the photo to provide enough contrast, as seen above.
You can use this text on background image a11y check tool to verify that you are meeting contrast requirements. You have to upload your image to the tool and select the font color. Our default body color is #423e3c.
Be sure to check the contrast at different screen sizes as the background can shift.
Lists
Tables
Use tables only for tabular data, not to create a layout. The accessibility department provides more details on the best practices for tables. If you're looking to create columns on your page, you need to use Layout Builder.
Factors to consider before creating a table:
- Tables are challenging to present well on mobile.
- Tables can no width assigned to them and they will fill the container they are in. So for example, if you put a table in a 2 column layout in the first column, it will fill the width of that first column. On mobile, these tables can look very compact.
- Tables can have an assigned width in pixels. This is a fixed width that will not shrink for mobile devices. It will cause overflow and your users will have to side scroll to view the table.
- You can create a responsive tables that will provide a side scroll on mobile. You need to add a div wrapper to the table with a class of "responsive-table".
<div class="responsive-table;"> <table>table code here...</table> </div>
- If necessary, use a table caption or summary. Read W3C's tutorial on table captions and summaries for guidance.
| Column Heading 1 | Column Heading 2 | Column Heading 3 |
|---|---|---|
| This is a row heading | here is a regular table cell | here is a regular table cell |
| Row Heading 2 | here is a regular table cell | here is a regular table cell |
| Row Heading 3 | here is a regular table cell | here is a regular table cell |
Accordions Guidance
The accordion paragraph can quickly compact a lengthy text-heavy page into a compact layout. It can be a useful tool for some types of content, but not for others. A few factors to keep in mind:
- How much of the content would an average visitor need to read or skim? Would collapsing it cause them to click on each entry?
- The answer can depend on the content and the audience for your page.
- Causing a majority of your visitors to expand each entry to simply access information may make it difficult for them to use the page.
- Many people are willing to scroll to skim and find the information they're looking for.
- The collapsed text is hidden and visitors can't use the "control+f" to find a specific word.
- Accordions may help with the layout of a page on mobile and could make it more approachable.
The Nielson Norman Group has more detail about how accordions are not always the answer for complex content and accordions on mobile.
Accordions are one of many tools for displaying content and have a place, but taking the time to consider how people will use your site will go a long way with your design.
Accordions Example
Section Title (this is always a heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Confecta res esset. Negat esse eam, inquit, propter se expetendam. Quod dicit Epicurus etiam de voluptate, quae minime sint voluptates, eas obscurari saepe et obrui. Contemnit enim disserendi elegantiam, confuse loquitur. Quare hoc videndum est, possitne nobis hoc ratio philosophorum dare. Negat enim summo bono afferre incrementum diem. Duo Reges: constructio interrete.
Sequitur disserendi ratio cognitioque naturae; Tum Lucius: Mihi vero ista valde probata sunt, quod item fratri puto. Tu enim ista lenius, hic Stoicorum more nos vexat. Propter nos enim illam, non propter eam nosmet ipsos diligimus. Deque his rebus satis multa in nostris de re publica libris sunt dicta a Laelio. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Ex quo, id quod omnes expetunt, beate vivendi ratio inveniri et comparari potest. Dolere malum est: in crucem qui agitur, beatus esse non potest.
Equidem etiam Epicurum, in physicis quidem, Democriteum puto. Si enim ad populum me vocas, eum. Maximas vero virtutes iacere omnis necesse est voluptate dominante. Et ille ridens: Video, inquit, quid agas; Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? At iam decimum annum in spelunca iacet. Quae in controversiam veniunt, de iis, si placet, disseramus. Ego vero volo in virtute vim esse quam maximam; Sine ea igitur iucunde negat posse se vivere?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Duarum enim vitarum nobis erunt instituta capienda. Pauca mutat vel plura sane; Hoc simile tandem est? Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
Sed ne, dum huic obsequor, vobis molestus sim. Videamus igitur sententias eorum, tum ad verba redeamus. Quod maxime efficit Theophrasti de beata vita liber, in quo multum admodum fortunae datur. Negat enim summo bono afferre incrementum diem. Atqui perspicuum est hominem e corpore animoque constare, cum primae sint animi partes, secundae corporis. Quo plebiscito decreta a senatu est consuli quaestio Cn.
Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Si verbum sequimur, primum longius verbum praepositum quam bonum. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Sed fac ista esse non inportuna; Ut alios omittam, hunc appello, quem ille unum secutus est. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Nam quid possumus facere melius?
- Quod non faceret, si in voluptate summum bonum poneret.
- Illis videtur, qui illud non dubitant bonum dicere -;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mehercule pergrata mihi oratio tua. Quae cum dixisset paulumque institisset, Quid est? At enim sequor utilitatem. Cur, nisi quod turpis oratio est? Vadem te ad mortem tyranno dabis pro amico, ut Pythagoreus ille Siculo fecit tyranno? Non quam nostram quidem, inquit Pomponius iocans; Beatus autem esse in maximarum rerum timore nemo potest. Quid enim de amicitia statueris utilitatis causa expetenda vides.
- Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam.
- Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus;
- Negabat igitur ullam esse artem, quae ipsa a se proficisceretur;
- Qui non moveatur et offensione turpitudinis et comprobatione honestatis?
Sed tu istuc dixti bene Latine, parum plane. Itaque hic ipse iam pridem est reiectus; Recte, inquit, intellegis. Fortitudinis quaedam praecepta sunt ac paene leges, quae effeminari virum vetant in dolore. Tum mihi Piso: Quid ergo? Equidem etiam Epicurum, in physicis quidem, Democriteum puto.
Duo Reges: constructio interrete. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Hosne igitur laudas et hanc eorum, inquam, sententiam sequi nos censes oportere? Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. At quanta conantur! Mundum hunc omnem oppidum esse nostrum! Incendi igitur eos, qui audiunt, vides.
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.
Sizes
Colors
Icons
There are 2 icons sets available in the Madrone theme: FontAwesome's free set of icons 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?
University Brand Icons
The brand icons typically have more detail than the FontAwesome icons. Most of them look their best at the XL size in the icon picker. It is not recommended to set them to the small or medium sizes.
Font Awesome Icons
Font Awesome icon set work well at smaller and larger sizes since they were built for web use. When using icons, it's best to not mix the two on the same page.
Text Readability
There are many factors to consider when displaying text in uppercase.
- Readability: Uppercase text can be harder to read and scan quickly.
- Accessibility: Screen readers may interpret all-caps text letter-by-letter, which can be confusing for users.
To ensure both readability and accessibility, it's recommended to type sentences in standard case and use CSS classes to transform the text's appearance. This approach maintains the original text structure, allowing screen readers to interpret and read the content correctly.
Use the .text-lowercase class to transform all letters to lowercase:
This is a normal sentence where every letter is transformed to lowercase.
Use the .text-uppercase class to transform all letters to uppercase:
This is a normal sentence transformed to uppercase.
Use the .text-capitalize class to capitalize the first letter of each word:
This is a normal sentence where the first letter of each word is capitalized.
Cards
Cards require a photo and some text with an optional link.
Default Card View Style
This view mode will keep the proportions of the photo and provide spacing around the photo and text.
Lorem ipsum dolor sit amet. Et nesciunt quia eum explicabo Quis qui atque nobis At nobis asperiores qui exercitationem voluptatem? Eum unde dicta qui autem ullam qui blanditiis eius hic dicta incidunt sit omnis doloremque!
Lorem ipsum dolor sit amet. Qui reiciendis error non corrupti quidem quo dolorem magni nam iusto sequi est molestiae possimus quo quaerat blanditiis nam expedita quasi. Sed architecto quos est quod quis ut necessitatibus temporibus. 33 velit aliquid ad earum sint sed omnis fugiat et laborum explicabo ea unde nihil eum quia alias ut recusandae explicabo.
Lorem ipsum dolor sit amet. Sed impedit voluptatibus 33 voluptatem sint a eius esse 33 dolores internos! Non sunt voluptatem qui alias illum ut nulla libero non rerum sunt aut consequatur vitae et quisquam beatae. Ad voluptatem magnam quo sapiente nobis ut nihil labore sit vero eveniet est impedit alias est dolor recusandae ut alias laborum.
Full Image Style
On the block settings, there is an option for full photo style under "View Mode." It will stretch the photo to fill the width of the card and add an orange border to the bottom of the image.
A nice three column with a full width image and rounded corners. If you want to add more:
Add block->OSU Card and ensure to select the View Mode at the bottom of the form to be "Full Image".
The new center will provide support and training from an anti-bias, culturally responsive lense to better equip educators who care for children from marginalized populations and for children who have experienced trama.
More Filler text. The text in these body fields really should not be overly long. Use the link option to help drive visitors to the pages that have more content.
Captions
Images now come with an option to include a caption that can describe the photo or give photography credit.
Some styling with be automatically added to any image with a caption to visually convey that the two are connected.
Dividers
A thin line that separates content is called a horizontal rule. They can be added to create a break in the page. They can be added to a block like this:
With more text below it. Or you can add it as a separate block to customize how much space is added between the chunks of copy.
By default we have provided 3rem (48 pixels) of margin on the top and bottom of the horizontal rule to provide spacing.
Or you can create a stripe of color to divide content.
Settings for the section below:
- Bootstrap 1 Column
- Edge to edge
- No gutters
- No content
- Select a background color
You can adjust the height of the divider by adjusting the padding on the block. Or if you want a larger divider, you can use the Size option and set it to 100 pixels.
Menu Bars with Icons
You can now create a variety of number of items for a menu bar.
To create a menu bar...
- Create a section by clicking Add Section
- Select the number of columns you want for your number of icons
- Select your:
- Column widths, container type, and gutter preference
- Background color
- Text color
- In each column, click Add Block
- Then click on Create Custom Block
- Choose the custom block type OSU Menu Bar Item
- Fill out the fields
- Icon name
- Size
- Link
- URL
- This can be another page on your website or an external link. You can just start typing to find the page in your website.
- Link Text
- The text that will display. You want to follow the best practcies for writing link text.
- URL
Read up on why the 5 columns aren't equal.