htmx/static/pico-1.5.11/docs/src/cards.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title=`Cards`
      description=`A flexible container with graceful spacings across devices and viewports.`
      canonical=`cards.html`
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active=`cards-link`}
      
      <div role="document">
        <section id="cards">
          <hgroup>
            <h1>Cards</h1>
            <h2>A flexible container with graceful spacings across devices and viewports.</h2>
          </hgroup>
          <article aria-label="Card example">
            I'm a card!
          </article>
          <pre><code>&lt;<b>article</b>&gt;I'm a card!&lt;/<b>article</b>&gt;</code></pre>
          <p>You can use <code>&lt;<b>header</b>&gt;</code> and footer <code>&lt;<b>footer</b>&gt;</code> inside <code>&lt;<b>article</b>&gt;</code></p>
          <article aria-label="Card sectioning example">
            <header>Header</header>
            Body
            <footer>Footer</footer>
          </article>

<pre><code>&lt;<b>article</b>&gt;
  &lt;<b>header</b>&gt;Header&lt;/<b>header</b>&gt;
  Body
  &lt;<b>footer</b>&gt;Footer&lt;/<b>footer</b>&gt;
&lt;/<b>article</b>&gt;</code></pre>

        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>