picnic/src/plugins/card/test.html

A lighweight CSS library with nice defaults and many plugins to kickstart your projects

<h2 id="card">Card</h2>

<p>
  <div class="flex three">
    <div>
      <article class="card">
        <img src="web/img/forest.jpg">
        <section>This is a nice forest. What do you want to do with it?</section>
        <footer>
          <button>Enjoy</button>
          <button class="dangerous">Go away</button>
        </footer>
      </article>
    </div>
    <div>
      <article class="card">
        <header>
          <h3>A more elaborated card</h3>
        </header>
        <section>It has some text</section>
        <footer>
          And even a footer!
        </footer>
      </article>
      <div>
        <input type="checkbox" id="cardtoggle">
        <article class="card">
          <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
          <label for="cardtoggle" class="close">×</a>
        </article>
      </div>
    </div>
    <div>
      <input id="cardtoggle2" type="checkbox" name="name">
      <article class="card">
        <header>
          <h1>Header 1</h1>
          <label for="cardtoggle2" class="close">×</a>
        </header>
      </article>
      <input id="cardtoggle3" type="checkbox" name="name2">
      <article class="card">
        <header>
          <h2>Header 2</h2>
          <label for="cardtoggle3" class="close">×</label>
        </header>
      </article>
      <article class="card">
        <header>
          <h3>Header 3</h3>
          <a class="close">×</a>
        </header>
      </article>
      <article class="card">
        <header>
          <h4>Header 4</h4>
          <a class="close">×</a>
        </header>
      </article>
    </div>
  </div>

  <div class="row">
    <div class="card">
      <p>This is a one line card</p>
      <a class="close">×</a>
    </div>
  </div>
</p>