bulma/docs/cyp/components/card.html

76 lines
1.8 KiB
HTML
Raw Permalink Normal View History

---
layout: cypress
title: Components/Card
---
{% capture header %}
<header class="card-header">
<p class="card-header-title">
Component
</p>
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</header>
{% endcapture %}
{% capture content %}
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
{% endcapture %}
{% capture image %}
<div class="card-image">
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
{% endcapture %}
{% capture footer %}
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
{% endcapture %}
<div style="width: 480px; margin: 2rem auto;">
<div id="card" class="card">
{{ image }}
{{ content }}
{{ footer }}
</div>
<div id="card-only-content" class="card">
{{ content }}
{{ content }}
</div>
<div id="card-header-content" class="card">
{{ header }}
{{ content }}
</div>
</div>