Layout Builder Library

These are the Layout Builder templates that are loaded to every OSU Drupal website. Your site may have more than this if you've saved layouts to your library.

OSU Hero

Hero Block Text

You can Move this block to the left column if you want a left aligned hero, or the right column for a right aligned hero. You should replace this next with something of your own.

My Hero Button

Three Column Cards

Areal photo of Weatherford Hall in the winter.

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".

Oregon State University Reeser Stadium Score Board Backside.

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.

Benton Hall with snow on the ground during the winter.

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.

Three Column Equal Size with Simple Cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Esse enim quam vellet iniquus iustus poterat inpune. Nam si amitti vita beata potest, beata esse non potest. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Claudii libidini, qui tum erat summo ne imperio, dederetur. Non dolere, inquam, istud quam vim habeat postea videro; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.

Quid est, quod ab ea absolvi et perfici debeat? Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Verum hoc idem saepe faciamus. Quod equidem non reprehendo; Cur iustitia laudatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Claudii libidini, qui tum erat summo ne imperio, dederetur. Non dolere, inquam, istud quam vim habeat postea videro; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.

Two Column 25-75

This is a 2 column 50% 50% edge to edge no gutters

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

If you have a dark or light background set and want to add space around your content, you want to apply padding, not margins. Background colors extend with padding, but not with margins.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.
  • Vivamus vestibulum ntulla nec ante.
Image
A seamless pattern of the word image on a pink background.

This photo is fairly large at  1900x1080 but with the max-width of 100% we ensure the photo does not overflow the content area. It's best to use photos closer to the size you want. You can configure Drupal to provide more options than the few here.

Two Column 50-50

With some breakpoints its better to have a extra wide desktop that uses a different percentage of the columns widths. For example this is a 25%/75% on screens larger than 1400px and 50%/50% on screens between 768px and 1400px.

It is also good to ensure that the content in this box is not too long as the image is not allowed to stretch beyond it's height.