Introduction | TrueUI

Molecules | Components

Accordion

Example

There is a moment in the life of any aspiring astronomer that it is time to buy that first telescope. It’s exciting to think about setting up your own viewing station whether that is on the deck of your home or having a powerful but mobile telescope set up to take to the remove countryside to really get a good shot at some breath taking star gazing.

The last thing we would want to do is to take away any of the “fun” of your hobby of astronomy because the joy of what we do as star gazers is a big part of the appeal. But unlike many other hobbies, ours is a passion of science, of learning and of discovery. And don’t kid yourself, even a hobbyist with a limited telescopic set up can see some amazing things in the stars. So let’s be sure you invest in a solid piece of equipment that you can continue to grow with as your knowledge and ability as an astronomer grows. But how do we do that?

HTML

<div class="cf mb2">
    <a href="#" class="link blue-dark bg-blue-light pa2 db">
      <div class="dib tl">Collapsible Group Item 1</div>
      <div class="dib tr fr">⇡</div>
    </a>
  </div>
<div class="pl4">
  <p class="lh-copy">
    There is a moment in the life of any aspiring astronomer that it is 
    time to buy that first telescope. It’s exciting to think about setting
    up your own viewing station whether that is on the deck of your home 
    or having a powerful but mobile telescope set up to take to the 
    remove countryside to really get a good shot at some breath taking star gazing.
  </p>
  <p class="lh-copy">
    The last thing we would want to do is to take away any of the “fun” 
    of your hobby of astronomy because the joy of what we do as star 
    gazers is a big part of the appeal. But unlike many other hobbies, 
    ours is a passion of science, of learning and of discovery. And don’t 
    kid yourself, even a hobbyist with a limited telescopic set up can see 
    some amazing things in the stars. So let’s be sure you invest in a 
    solid piece of equipment that you can continue to grow with as your 
    knowledge and ability as an astronomer grows. But how do we do that?
  </p>
</div>
<div class="cf mb2">
  <a href="#" class="link blue-dark bg-blue-light pa2 db">
    <div class="dib tl">Collapsible Group Item 2</div>
    <div class="dib tr fr">⇣</div>
  </a>
</div>
<div class="cf mb2">
  <a href="#" class="link blue-dark bg-blue-light pa2 db">
    <div class="dib tl">Collapsible Group Item 3</div>
    <div class="dib tr fr">⇣</div>
  </a>
</div>