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.
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.
- Learn more about accessibility and headings: this page goes over how to properly structure a webpage using headings
- Read the Drupal how-to on headings for step by step instructions for adding headings, tips and heading exceptions for unique instances in OSU Drupal
Heading appearance is controlled by the theme. The font, colors, and sizes were chosen for accessibility, brand alignment, and visual appeal.
Instructions for adding headings
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.
Instructions for display fonts
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 also have the option to add a class to the section to darken the photo. Refer to the examples of darkened backgrounds along with instructions.
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
Ordered list:
- Use an ordered list when the sequence matters.
- Sub item with upper alpha style
- Sub sub item with lower Roman style
- Sub item with upper alpha style
- List item with no style set
- Sub item with upper Roman style
- Sub item with upper Roman style
- Sub item with lower alpha style
- List item
Ordered list styles available
- not set (1, 2, 3, etc.)
- Lower Roman (i, ii, iii, iv, v, etc.)
- Upper Roman (I, II, III, IV, V, etc.)
- Lower Alpha (a, b, c, d, e, etc.)
- Upper Alpha (A, B, C, D, E, etc.)
Unordered list:
- Use an unordered list for list of items where the order doesn't matter.
- Sub item
- Sub sub item
- Sub item
- List item
- List item
Instructions for how to create lists
Links
Links are styled with an orange underline that disappears on hover.
- Learn about accessibility requirements for links
- Follow the step-by-step instructions for creating links in Drupal
Links come with an icon attached to them to help indicate what will happen when someone clicks on them.
- Example internal link
- Example external link
- Example link to document
- Example link to open in new window
- Opening links in a new window has accessibility requirements and should be used only in specific situations, not to keep users on your site.
- Read about the WCAG requirements for opening links in a new tab
- Example email link
- Example telephone link: (555) 555-555
Tables
Use tables only for tabular data, not to create a layout. If you're looking to create columns on your page, you need to use Layout Builder.
Instructions for accessible tables
| 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
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.
Cards
Cards require a photo and some text with an optional link.
Default Card View Style
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
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 like the black bar below.
Find instructions on how to create these stripes on the Drupal Elements Page.
Menu Bars with Icons
You can now create a variety of number of items for a menu bar.
Read up on why the 5 columns aren't equal.