catan-client/app/scss/picnic/plugins/card/test.html

Settlers of Catan Client Implementation

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

<p>
  <div class="row">
    <div>
      <article class="card">
        <img src="/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 foter!
        </footer>
      </article>
      <article class="card">
        <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
        <a class="close">×</a>
      </article>
    </div>
    <div>
      <article class="card">
        <header>
          <h1>Header 1</h1>
          <a class="close">×</a>
        </header>
      </article>
      <article class="card">
        <header>
          <h2>Header 2</h2>
          <a class="close">×</a>
        </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>