Text based modules

Reference layouts for text-heavy modules: combine .container with Pronto’s .grid / .cell, and use the editorialSplit section variants where noted. Full markup for each variant lives under organisms/textBased/.

Equal two columns

Simple two-column body copy using .grid.-columns-2 and .cell.

Nullam efficitur libero elit, consectetur commodo nulla rutrum ac. Suspendisse semper eleifend fringilla. Donec pharetra mauris feugiat mi malesuada, nec fringilla quam fermentum.

Etiam ac tristique arcu, eget vestibulum metus. Aenean feugiat, lorem sit amet varius condimentum, mauris velit fermentum ante.

Praesent quis est dapibus, pretium mi at, cursus tellus. In eleifend, quam efficitur dapibus fermentum, odio eros scelerisque felis, sit amet posuere lectus ante vitae mauris.

Nam ullamcorper lobortis libero et laoreet. Duis nec varius ex, in convallis ante. Donec mollis sollicitudin ligula quis placerat.

Asymmetric intro and body

Narrow intro column beside wider body copy. Uses editorialSplit with -introBody

Elementum libero nulla mollis lectus, proin consequat dui nec commodo.

Praesent quis est dapibus, pretium mi at, cursus tellus. In eleifend, quam efficitur dapibus fermentum, odio eros scelerisque felis, sit amet posuere lectus ante vitae mauris. Nam ullamcorper lobortis libero et laoreet. Duis nec varius ex, in convallis ante. Donec mollis sollicitudin ligula quis placerat. Vestibulum luctus lacus in justo ultrices, sed egestas orci ornare.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis est dapibus, pretium mi at, cursus tellus.

Aside and display headline

Supporting lede beside a large display headline. Section uses -headline; spacer column is hidden on small screens.

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dignissim urna quam, eu sollicitudin.

Duis nec varius ex, in convallis ante. Donec mollis sollicitudin ligula quis placerat, vestibulum luctus lacus in justo ultrices; dolorem ipsum.

Duis tellus ex, rutrum non tortor in, dolor vulputate iaculis est.

Quis elementum libero nulla mollis lectus, proin consequat dui nec commodo iaculis magna:

Proin consequat dui nec cursus commodo. Proin non magna quam. Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque.

Default Button Standalone Text Link

Integer pulvinar rhoncus neque

Proin consequat dui nec cursus commodo. Proin non magna quam. Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque.

Pulvinar rhoncus nec ipsum sit adiscipit

Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque. Proin consequat dui nec cursus commodo. Proin non magna quam.

Pulvinar rhoncus nec ipsum sit adiscipit

Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque. Proin consequat dui nec cursus commodo. Proin non magna quam.

Integer pulvinar rhoncus neque

Proin consequat dui nec cursus commodo. Proin non magna quam. Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque.

Sed sed porttitor ante. Vivamus auctor mi nec laoreet vestibulum. Cras accumsan tempus tincidunt, aenean scelerisque at purus non varius.

Donec pharetra mauris feugiat mi malesuada, nec fringilla quam fermentum. Pellentesque in odio quis turpis porttitor aliquet. Vivamus commodo efficitur turpis. Aliquam

Pellentesque in odio quis turpis porttitor aliquet. Vivamus commodo efficitur turpis. Aliquam pharetra tellus in turpis commodo, non dapibus urna ultrices. Cras commodo vulputate

Aliquam pharetra tellus in turpis commodo, non dapibus urna ultrices. Cras commodo vulputate ipsum sed iaculis. Etiam ac tristique arcu, eget vestibulum metus. Aenean feugiat.

Centered headline and four detail columns

Centered title and intro, then a responsive step grid: one column on phones, two from md, four from lg.

1. Lorem Ipsum

Donec pharetra mauris feugiat mi malesuada, nec fringilla quam fermentum. Pellentesque in odio quis turpis porttitor aliquet. Vivamus commodo efficitur turpis.

2. Dapibus Urna in Turpis

Pellentesque in odio quis turpis porttitor aliquet. Vivamus commodo efficitur turpis. Aliquam pharetra tellus in turpis commodo, non dapibus urna ultrices.

3. Portitor Turpius Adisciput

Aliquam pharetra tellus in turpis commodo, non dapibus urna ultrices. Cras commodo vulputate ipsum sed iaculis. Etiam ac tristique arcu, eget vestibulum metus.

4. Malesuada Mauris

Nam ullamcorper lobortis libero et laoreet. Duis nec varius ex, in convallis ante. Donec mollis sollicitudin ligula quis placerat.

Intro column and horizontal cards

Muted band with intro column and horizontal cards stacked in .cardList (molecules/cardList/). Section uses -withCards on editorialSplit.

Adisciput Nostra, per inceptos.

Turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.

Default Button

Convallis ante

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo.

Standalone Text Link

Convallis ante

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo.

Standalone Text Link
editorialSplit -withCards with sticky aside

Intro column and horizontal cards

Muted band with intro column and horizontal cards stacked in .cardList (molecules/cardList/). Section uses -withCards on editorialSplit.

Adisciput Nostra, per inceptos.

Turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.

Default Button

Convallis ante

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo.

Standalone Text Link

Sed do eiusmod tempor incididunt.

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.

Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo.

Standalone Text Link

Consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Standalone Text Link

Consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Standalone Text Link