• Patterns
  • General

Content reveal class

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consectetur quas dolorum veritatis nam! Id fuga, similique earum totam beatae nobis quo debitis rerum quasi suscipit ab consequatur eius ea!

Vero velit blanditiis, molestias facere placeat, quaerat ab ipsam quisquam unde minima asperiores dolorem, iure ducimus ullam dignissimos deleniti quia dolore incidunt deserunt cupiditate. Voluptates, optio vel sapiente nisi. Voluptatum.

Perferendis accusamus hic dolorem delectus illo ullam at corporis voluptas totam. Veritatis blanditiis culpa aut laboriosam error inventore repellendus saepe, nisi porro officiis quisquam molestias eum officia recusandae ea cupiditate!

Fanny pack disrupt vegan tote bag, Kickstarter shabby chic meggings. Truffaut scenester kogi, hoodie art party ethical slow-carb. Lo-fi plaid Godard master cleanse Schlitz, ugh fanny pack cardigan trust fund narwhal Pitchfork. Locavore banh mi scenester jean shorts tofu asymmetrical chia selvage, readymade food truck letterpress cardigan fashion axe you probably haven't heard of them Echo Park. Flexitarian crucifix bespoke, Cosby sweater leggings authentic 90's irony locavore whatever Odd Future scenester Marfa single-origin coffee Pinterest. Organic fanny pack keffiyeh, semiotics try-hard asymmetrical ugh Banksy kogi gastropub drinking vinegar McSweeney's Tumblr Wes Anderson. Locavore tote bag plaid, next level you probably haven't heard of them distillery vegan Thundercats ethical butcher fingerstache.

Usage notes

Use when you want to display a small amount of content and have the option for the content to go into more depth, but space is critical, like content page introductions.

 
<div class="content-reveal panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consectetur quas dolorum veritatis nam! Id fuga, similique earum totam beatae nobis quo debitis rerum quasi suscipit ab consequatur eius ea!</p>
  <p>Vero velit blanditiis, molestias facere placeat, quaerat ab ipsam quisquam unde minima asperiores dolorem, iure ducimus ullam dignissimos deleniti quia dolore incidunt deserunt cupiditate. Voluptates, optio vel sapiente nisi. Voluptatum.</p>
  <p>Perferendis accusamus hic dolorem delectus illo ullam at corporis voluptas totam. Veritatis blanditiis culpa aut laboriosam error inventore repellendus saepe, nisi porro officiis quisquam molestias eum officia recusandae ea cupiditate!
    <a href="#" class="content-reveal__action hidden"
    data-content-reveal=""> See more</a>
  </p>
  <div class="content-reveal__hidden">
    <p>
      Fanny pack disrupt vegan tote bag, Kickstarter shabby chic meggings. Truffaut scenester kogi, hoodie art party ethical slow-carb. Lo-fi plaid Godard master cleanse Schlitz, ugh fanny pack cardigan trust fund narwhal Pitchfork. Locavore banh mi scenester
      jean shorts tofu asymmetrical chia selvage, readymade food truck letterpress cardigan fashion axe you probably haven&apos;t heard of them Echo Park. Flexitarian crucifix bespoke, Cosby sweater leggings authentic 90&apos;s irony locavore whatever
      Odd Future scenester Marfa single-origin coffee Pinterest. Organic fanny pack keffiyeh, semiotics try-hard asymmetrical ugh Banksy kogi gastropub drinking vinegar McSweeney&apos;s Tumblr Wes Anderson. Locavore tote bag plaid, next level you probably
      haven&apos;t heard of them distillery vegan Thundercats ethical butcher fingerstache.
    </p>
  </div>
</div>

Developer Notes

This is progressively enhanced, so without JS, all the content will be displayed.

Combine with panels for vertical spacing.