<%- include('../../_common/ja/_head', {
  key: 'docs',
  pagetitle: 'Card | Document'
}) %>

<%- include('../../_component/docs/ja/_header') %>

<%- include('../../_component/docs/ja/_menu') %>

<div class="uc-grid _small-col-full _nowrap">

<%- include('../../_component/docs/ja/_sidebar', {
  current: 'card'
}) %>

  <div class="uc-grid-cell _col-fit">

  <main class="uc-content">
    <section class="uc-section">

      <h2 class="uc-section-title">Card</h2>
      <p>You can create a simple card by specifying the <code>uc-card</code> class.</p>

      <div class="doc-component-box" id="c-1">
        <h3>1. Basic</h3>
        <p>It is a simple card composed of text and buttons.</p>

        <div class="doc-component-preview">
          <div class="uc-card">
            <div class="uc-card-title">Simple card</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
            <div class="uc-btn _primary"><a href="#">Button</a></div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-card"&gt;
  &lt;div class="uc-card-title"&gt;Simple card&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!&lt;/p&gt;
  &lt;div class="uc-btn _primary"&gt;&lt;a href="#"&gt;Button&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-2">
        <h3>2. Hover</h3>
        <p>It is a card that emerges when you hover the mouse cursor. <br>This is useful when you want to emphasize elements.</p>

        <div class="doc-component-preview">
          <div class="uc-card _hover">
            <div class="uc-card-title">Hover card</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-card _hover"&gt;
  &lt;div class="uc-card-title"&gt;Simple card&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!&lt;/p&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-3">
        <h3>3. Float</h3>
        <p>It is a card that always emerges. <br>This is useful when you want to emphasize elements.</p>

        <div class="doc-component-preview">
          <div class="uc-card _float">
            <div class="uc-card-title">Float card</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
            <div class="uc-btn _primary"><a href="#">Button</a></div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-card _float"&gt;
  &lt;div class="uc-card-title"&gt;Simple card&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!&lt;/p&gt;
  &lt;div class="uc-btn _primary"&gt;&lt;a href="#"&gt;Button&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-4">
        <h3>4. Banner</h3>
        <p>It is a card whose entire card is clickable.</p>

        <div class="doc-component-preview">
          <div class="uc-card _banner">
            <a href="#">
              <div class="uc-card-title">Banner card</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
              <div class="uc-btn _primary"><span>Button</span></div>
            </a>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-card _banner"&gt;
  &lt;a href="#"&gt;
  &lt;div class="uc-card-title"&gt;Banner card&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!&lt;/p&gt;
  &lt;div class="uc-btn _primary"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-5">
        <h3>5. Cover Image</h3>
        <p>You can embed images in the card. Images are automatically trimmed and placed in the center.</p>

        <div class="doc-component-preview">
          <div class="uc-card">
            <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
            <div class="uc-card-title">Cover image card</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
            <div class="uc-btn _primary"><a href="#">Button</a></div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-card"&gt;
  &lt;div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"&gt;&lt;/div&gt;
  &lt;div class="uc-card-title"&gt;Cover image card&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!&lt;/p&gt;
  &lt;div class="uc-btn _primary"&gt;&lt;a href="#"&gt;Button&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-6">
        <h3>6. Thumbnail</h3>
        <p>The image embedded in the card is resized to the thumbnail size and displayed.</p>

        <div class="doc-component-preview">
          <div class="uc-card _thumb">
            <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
            <div class="uc-card-wrap">
              <div class="uc-card-title">Thumb image card</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
              <div class="uc-btn _primary"><a href="#">Button</a></div>
            </div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-card _thumb"&gt;
  &lt;div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"&gt;&lt;/div&gt;
  &lt;div class="uc-card-wrap"&gt;
  &lt;div class="uc-card-title"&gt;Thumb image card&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!&lt;/p&gt;
  &lt;div class="uc-btn _primary"&gt;&lt;a href="#"&gt;Button&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-7">
        <h3>7. Layout</h3>
        <p>It has a structure inside the card, allowing for more complex styling. <br>You can easily create a profile card like the sample below.</p>

        <div class="doc-component-preview">
          <div class="uc-card">
            <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
            <div class="uc-card-header">
              <div class="uc-card-icon" style="background-image:url(https://source.unsplash.com/random)"></div>
              <div class="uc-card-title">Layout card</div>
            </div>
            <div class="uc-card-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
            </div>
            <div class="uc-card-footer">
              <div class="uc-btn _primary"><a href="#">Button</a></div>
            </div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-card"&gt;
  &lt;div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"&gt;&lt;/div&gt;
  &lt;div class="uc-card-header"&gt;
    &lt;div class="uc-card-icon" style="background-image:url(https://source.unsplash.com/random)"&gt;&lt;/div&gt;
    &lt;div class="uc-card-title"&gt;Layout card&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-card-body"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="uc-card-footer"&gt;
    &lt;div class="uc-btn _primary"&gt;&lt;a href="#"&gt;Button&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

    </section>

    <div class="uc-pager-unit">
      <div class="uc-btn"><a href="./hero.html">← Hero</a></div>
      <div class="uc-btn _primary"><a href="./button.html">Button →</a></div>
    </div>
  </main>

  </div>

</div>

<%- include('../../_component/_footer') %>

<%- include('../../_common/_foot') %>
