90 lines
3.6 KiB
Text
90 lines
3.6 KiB
Text
---
|
|
title: Card
|
|
---
|
|
|
|
<p>
|
|
Previous to version 3, the card component was a Nunjucks include. There are a number of things that had to
|
|
be set before being able to use it, like the level of the heading or whether tags shall be displayed.
|
|
<a href="https://www.11ty.dev/docs/languages/webc/">WebC</a>
|
|
makes this easier, as you can now use the custom element and opt in to the different slots.
|
|
</p>
|
|
|
|
<h3>Available slots:</h3>
|
|
<ul>
|
|
<li>
|
|
<code>image</code>: has <code>slot="image"</code> on the
|
|
container (<code>picture</code> or <code>figure</code>) by default)
|
|
</li>
|
|
<li><code>headline</code>: display the card's main title</li>
|
|
<li>
|
|
<code>date</code> and <code>tag</code>: Grouped within the classes <code>meta</code> and <code>cluster</code> for date and tagging
|
|
information
|
|
</li>
|
|
<li><code>content</code></li>
|
|
<li><code>footer</code>: for links or whatever footer information</li>
|
|
</ul>
|
|
|
|
<p>I added some <strong>variants</strong>, avaliable via attribute selectors:</p>
|
|
|
|
<ul>
|
|
<li><code>img-square</code>: Enforces a square aspect ratio for images</li>
|
|
<li><code>clickable</code>: Makes the whole card clickable</li>
|
|
<li><code>no-padding</code>: Removes padding and background modifications</li>
|
|
</ul>
|
|
|
|
<h3>Usage</h3>
|
|
|
|
<pre><code>{% raw %}<!--prettier-ignore--><custom-card>
|
|
{% image "path-to-img", "alt-text" %}
|
|
<span slot="date"></span>
|
|
<span slot="tag" class="button"></span>
|
|
<h2 slot="headline"></h2>
|
|
<p slot="content"></p>
|
|
<footer slot="footer"></footer>
|
|
</custom-card>
|
|
{% endraw %}</code></pre>
|
|
|
|
<h3>Example</h3>
|
|
|
|
<div class="grid" data-layout="50-50">
|
|
<custom-card>
|
|
{% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
|
|
<span slot="date">1516</span>
|
|
<span slot="tag" class="button" data-small-button>Default</span>
|
|
<h4 slot="headline">Utopia</h4>
|
|
<p slot="content">
|
|
Among them, there is no sort of traffic, no knowledge of letters, no understanding of numbers, no name
|
|
of magistrates, nor of politics, only of virtues; and they measure all things by barleycorns; their
|
|
money, plate, and other ornaments they so diligently polish that no rust can stick to them.
|
|
</p>
|
|
<footer slot="footer"><a href="#">Link in the footer</a></footer>
|
|
</custom-card>
|
|
|
|
<custom-card clickable img-square>
|
|
{% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
|
|
<span slot="date">18.02.1984</span>
|
|
<div slot="tag" webc:nokeep>
|
|
<span class="button" data-small-button>clickable</span
|
|
><span class="button" data-small-button>square image</span>
|
|
</div>
|
|
<footer slot="footer"><a href="#">Link in the footer makes whole card a link</a></footer>
|
|
<h4 slot="headline">The order does not matter</h4>
|
|
</custom-card>
|
|
|
|
<custom-card>
|
|
<p slot="content">
|
|
They have no lawyers among them, for they consider them as a sort of people whose profession it is to
|
|
disguise matters and to wrest the laws [...].
|
|
</p>
|
|
<h4 slot="headline">Just title and content</h4>
|
|
</custom-card>
|
|
|
|
<custom-card no-padding>
|
|
{% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
|
|
<p slot="content">
|
|
Red Hat's first logo appeared on an early invoice. It was a simple, bright red brimmed top hat placed
|
|
above the words "Red Hat Software."
|
|
</p>
|
|
<h4 slot="headline">This card has no padding</h4>
|
|
</custom-card>
|
|
</div>
|