accordion

Why do we need to use Vue for an accordion element?

Technically you don't – the functionality in Pronto does not require p-accordion to be used.

However, without JS, the height of the collapsed details element only allows for one row of summary text, and it's not possible to animate closing the details element.

Why do we need a FAQ style module?

Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.

Is this considered a frequently asked question?

Can this be used in more general situations?

Why use a different color for interactions vs. navigation?

actions

Learn More Sign Up

banner

Consectetur aliquid qui sapiente minima libero. Vel blanditiis distinctio numquam aliquam temporibus repellendus. Quis esse vitae vitae sunt sapiente velit. Repellendus facilis voluptate dolore debitis quas! Vitae dignissimos aliquid porro Dolor magni amet quaerat nobis quis Laborum deserunt quo delectus optio eius eaque Mollitia reprehenderit maiores numquam libero nesciunt Quae non dolor exercitationem debitis at Excepturi quam eum in voluptas.

basicSection

It will stack on mobile, putting elements in natural content order. Links and other components will use their default colors.

This is section is using .accent-primary.

Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. Nam nunc justo, varius id metus eu praesent dictum sit amet quam efficitur placerat.

This is using .accent-secondary and shows how to do two-thirds content.

Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Nam nunc justo, varius id metus eu praesent dictum sit amet quam efficitur placerat.

This is using .accent-tertiary.

Learn More Buy Now

button

.-outline

.-outline-fill

.-ghost

callout

Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.

callout--split

Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.

card

Card

Title of card that will fall to two lines

Quisque tristique Standard Text Link sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.

Standard Text Link

card--condensed

Card Condensed

Posted Aug 12, 2023 by Daphne Writesposts

Title of card that will fall to two lines

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.

15 Minute Read

Simple Tag
Simple Tag

card--flipped

Card Flipped

Title of card that will fall to two lines

Posted Aug 12, 2023 by Daphne Writesposts

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.

Default Button

card--icon

Card Icon

Title of card that will fall to two lines

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.

Default Button

card--tags

Card Tags

Simple Tag
Simple Tag

Title of card that will fall to two lines

Posted Aug 12, 2023 by Daphne Writesposts

15 Minute Read

checkbox

Checkbox Checked Disabled Checked Disabled

checklist

Elit non fuga ratione quidem eligendi? Temporibus dolor eveniet distinctio tempora adipisci Sed ducimus voluptate voluptate repudiandae quis? Perferendis molestias eum dolorem dolorem veniam. Ipsa enim animi eveniet qui totam
Lorem maxime dolores dolores saepe quia quo Numquam quas veritatis officia incidunt est beatae debitis Rerum voluptates illum accusamus fugit ipsa impedit magni Reiciendis sapiente quidem consequuntur ut molestias voluptatum
Ipsum blanditiis sapiente reiciendis laboriosam maxime Sapiente ab exercitationem saepe vero blanditiis quis Tempora quibusdam iure perferendis quasi provident? Consequuntur velit reprehenderit voluptatem vel vitae. Placeat harum labore voluptatibus inventore
Ipsum nesciunt incidunt soluta corporis distinctio? Tempore enim possimus architecto fugit expedita. Alias voluptates hic cum atque nihil Aliquam beatae laborum error id saepe Inventore aspernatur vitae cumque repellat magni.

colors

default

.error

.warning

.success

.info

.accent-primary

.accent-secondary

.accent-tertiary

container

The basic .grid.-container blah blah.

.-span-6

.-center-6

.-last-6

dialog

eyebrow

Eyebrow Eyebrow .-fill

featuredTestimonials

Some of our thoughtful testimonials.

Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!

Firstnamerson Lastname Director of Important Titles, CorporateCorp

field

Text field:

Coaching Text

Email:

-inline

Checkbox Radio Text field:

Coaching Text

Email:

-reversed

Checkbox

Dolor architecto facere!

Radio

form

Contact Us

First Name

Last Name

Email Address Title (optional)

Questions or Comments (optional)

I agree to the Terms and Conditions

grid

.grid defaults to one column.

You can change this by adding a modifier: .-columns-N.

You can use .cell.-span-N as a utility to span columns.

You can use .cell.-right to right align an element.

4 middle cells

You can use .cell.-center-N to center an element, as best as it can.

Examples

This section is grid -columns-2.

Al of the layout for these sections are being done using .grid and .cell.

This shows how to do two-thirds content.

And here's an example centering the content.

Learn More Buy Now

heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

hero

This is the default hero.

It has no padding by default to let the image go all the way to the edges.

Learn More Buy Now

This version is -padded, and it uses .accent-secondary without any text below it.

Learn More Buy Now

Lastly, this hero the image bleeding to the right edge.

Learn More Buy Now

And this one has no image at all; just a bunch of really big text.

Learn More Buy Now

icon

arrow-left arrow-right bullet-thin bullet check info error chevron-down chevron-left chevron-right chevron-up clock close facebook home instagram layers linkedin minus play quote search tag x youtube date location bars check.-circle minus.-circle play.-circle chevron-down.-circle check.-circle.success info.-circle.info warning.-circle.warning error.-circle.error check.-square.success info.-square.info warning.-square.warning error.-square.error

input

Fake input

Fake disabled input

link

This is a regular link with no class, it is regular.
Standalone Text Link
Adipisicing eius quis perferendis dicta aut aliquid Autem pariatur harum nesciunt dicta recusandae. Libero molestiae fugit totam odio cumque commodi. Provident earum quis magni excepturi porro nemo? Praesentium ex architecto

list

Ipsum voluptas cupiditate.
Adipisicing impedit accusantium!
Amet laudantium nulla.
- Etiam euismod nunc id felis suscipit sodales sed in quam odio proin tempus ultricies orci, sed ultricies leo.
- Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque finibus, odio id cursus porta, neque odio imperdiet purus, at tempor lorem lacus ut massa.
- Amet laudantium nulla.
Amet laudantium nulla.

Ipsum voluptas cupiditate.
Adipisicing impedit accusantium!
Lorem minus sit corporis ut fugit?
1. Elit neque quia inventore
2. Consectetur alias a eius.
3. Lorem vero nam ab
Amet laudantium nulla.

Dolor nulla a illum veniam cumque Quod repudiandae atque tempore deleniti ut beatae culpa. Molestias distinctio sit necessitatibus tenetur aliquam fuga. Ducimus aliquam commodi eum autem atque? Fuga sequi nesciunt
Ipsum velit delectus explicabo eum voluptatem. Debitis
Lorem aspernatur hic eos dignissimos tempore quia!

Adipisicing quaerat nemo
Dolor sit optio?
Dolor dolor dolorem.
Amet quas aliquam

Amet iure.

Ipsum id sequi molestiae doloribus sequi Deserunt quos modi quos saepe voluptate eum vel esse Neque excepturi ratione id modi quo. Suscipit blanditiis officia quod saepe vero Mollitia dolorum magni.

Adipisicing a nesciunt.

Amet rem cumque quo asperiores saepe, saepe! Quod natus eveniet dolore ducimus at nisi beatae Iste rerum placeat id laboriosam officia. Corrupti tempora ad hic magni laudantium Cum voluptates aut

Amet minus corrupti

Dolor distinctio repellendus aliquid sint necessitatibus. Minus quidem tempora obcaecati provident molestias, odio. Iusto itaque magni facere quos unde Eaque qui quis voluptas nobis minima? Doloribus facere inventore natus fugit.

Elit commodi voluptatibus.

Dolor voluptatibus et praesentium aliquam debitis vitae. Saepe nihil enim dicta doloremque expedita. Id consequuntur modi maxime omnis delectus Cum omnis voluptatum molestias eius incidunt? Consequuntur eaque non animi dolore.

Dolor nulla inventore.

Ipsum ullam facilis similique labore quis Molestiae modi ratione tenetur cumque aspernatur aliquid Nemo culpa velit corrupti excepturi illum Repellendus voluptates similique fugiat dolorum rem iusto Tenetur animi voluptatibus similique!

Amet in labore?

Amet eum explicabo provident pariatur magni cumque. Laborum eius ab totam exercitationem dicta. Nostrum minima sint praesentium nobis blanditiis. Fugiat commodi illo nihil reiciendis ab Voluptas in consequatur ea earum.

Amet voluptatibus inventore: Ipsum tenetur nemo omnis rerum modi fugiat aut, voluptas. Dolores minus sunt adipisci suscipit voluptas Tempore ullam explicabo quos facilis soluta recusandae Explicabo velit earum rem consequatur itaque exercitationem. Amet

media-PYouTube

media__trigger -keepVisible

message

Message content neque tincidunt, rhoncus sapien ac, volutpat enim.

Elit molestiae natus deleniti ipsam modi mollitia iusto quos, quaerat Itaque quasi quae maiores quidem est. Exercitationem optio voluptatem fuga provident dolores Sint dolor facilis dolor mollitia quos? Enim porro.

Message content neque tincidunt, rhoncus sapien ac, volutpat enim.

message--dark

Message content neque tincidunt, rhoncus sapien ac, volutpat enim.

mobileNavigation

Elit nesciunt repellat aut exercitationem minus Ea doloribus asperiores quos aliquam repellat Et dolor minima eaque nostrum dolore animi. Debitis expedita assumenda dolores tenetur recusandae Ea nesciunt totam tenetur excepturi

Lorem nisi eveniet asperiores itaque fugit nam Iusto culpa enim aspernatur dolore error Doloribus eligendi ab id consequatur ratione Maxime quae et esse corrupti magni. Totam exercitationem dolor voluptate soluta.

Adipisicing lorem beatae recusandae nisi id Facere distinctio laboriosam similique est quas. Laboriosam quam veniam impedit nostrum rem. Reiciendis praesentium totam nobis tenetur adipisci. Fuga odit corporis ducimus ipsam alias.

Consectetur dolor labore modi eaque delectus Accusamus eligendi in sequi sapiente enim Corporis laudantium inventore odit minima culpa Eum ducimus molestiae sapiente assumenda facere ex. Quaerat itaque aliquam aspernatur quo

Adipisicing nesciunt similique illum sint iure, aliquam? Ipsam fugiat labore explicabo itaque error? Nulla sequi alias ab provident vitae Commodi quasi iste omnis provident saepe Exercitationem dolorum quod magni inventore

Sit fugit a distinctio ipsa fugiat. Totam in tempore tempora laboriosam rem Facilis fugit excepturi iure eius doloribus, expedita numquam? Suscipit commodi iusto cum assumenda voluptatum, unde nihil Ab molestiae?

Elit voluptate quos velit nostrum tempora minima. Perspiciatis odit voluptatibus placeat laudantium at Corporis illo saepe ducimus explicabo alias. Quia tenetur corporis odit dicta esse laboriosam Placeat dolore velit necessitatibus?

Elit ipsam alias maxime pariatur tenetur. Culpa a aspernatur quas blanditiis culpa. Laudantium exercitationem accusantium corrupti vero rerum! Eligendi corporis eveniet eos dignissimos facilis Tempora ab cum sapiente vero placeat.

Consectetur distinctio temporibus error voluptate nisi recusandae odio quis Enim quam officia ipsam vel consequatur beatae laudantium pariatur est? Distinctio id quos ea repellendus quo Impedit nulla necessitatibus in quisquam.

Lorem optio eligendi quis architecto laboriosam Similique possimus fugit dolorum sequi atque dolores. Obcaecati corporis labore accusamus fuga voluptatem inventore laboriosam quod perspiciatis. Magni sapiente accusamus veniam harum obcaecati. Quo

navigation

navigation-hoverable

oneColumn

Heading Placeholder

Adipisicing tempora culpa a unde molestiae. Tenetur ducimus facilis.

pagination

radio

Checked Unchecked

Disabled Disabled Checked

Radio Above Label Radio Above Label

Radio Below Label Radio Below Label

Radio After Label Radio After Label

richText

Paragraph ipsum possimus illum debitis enim odio Distinctio praesentium explicabo mollitia voluptatem nostrum sunt. Ut iste dignissimos soluta unde repudiandae. Voluptate et neque non aspernatur aliquid asperiores tenetur amet reprehenderit? Numquam.

Lorem ratione temporibus beatae doloremque?

Lorem nobis impedit labore quod at qui esse. Quo velit?
Lorem cumque fugit nisi consectetur aliquid Natus suscipit modi nam.
Ipsum repellat exercitationem rerum eos iste? Impedit quos at dignissimos.

Consectetur nulla voluptatem a veniam perspiciatis omnis quam. Adipisci fugit explicabo obcaecati hic ab. Repudiandae amet veniam vero sapiente harum Explicabo numquam facilis dolor at numquam Molestiae assumenda laboriosam asperiores.

Amet quis hic deleniti fugit obcaecati Libero fuga doloribus corrupti.
Lorem totam vitae commodi illum ab? Quos quibusdam ducimus dignissimos
Elit incidunt aut omnis dolorem eaque. Elit tenetur nostrum dolores

Consectetur amet magnam vitae nisi rem Dolore assumenda unde fuga ex doloremque. Harum veniam eveniet aspernatur maiores ex Eius eaque ab quam dicta sequi! Aut eaque ratione quasi enim voluptate
First Lastername

Elit temporibus quos officiis qui unde beatae. Repellendus pariatur temporibus velit sit voluptate Expedita quibusdam eaque quod magnam eaque Sint sequi consequuntur aperiam accusantium porro? Code snippet eaque at saepe

    module Main where

    main :: IO ()
    main = putStrLn "Hello World!"

section

This if the content of the section, .section__content. Depending on the type of section, this is likely where the bulk of the differentiation occurs.

slider

Slide 1

Slide 2

Slide 3

Slide 4

Wide

Slide 6

srOnly

There is a hidden sentence after this one that is only visible to screen readers. This is done by using the srOnly class.