Slots:

• image: the image shortcode comes with the slot="image" assigned to its picture or figure wrapper by default
• headline: To display the card's main title.
• date and tag: Grouped within a meta div for date and tagging information.
• content
• footer: For footer content / links etc.

Variants:

• no-padding: Removes padding and background modifications.
• img-square: Enforces a square aspect ratio for images.
• clickable: Makes the whole card clickable.

  
  <custom-card>
	{% image "path-to-img", "alt-text" %}
	<span slot="date"></span>
	<span slot="tag" class="button post-tag"></span>
	<h2 slot="headline"></h2>
	<p slot="content"></p>
	<footer slot="footer"></footer>
	</custom-card>

Utopia

1516Default

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.

The order does not matter

18.02.1984

clickablesquare image

Just title and 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 [...].

This card has no padding

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."

The custom-details component is best used via its corresponding Nunjucks include.
The component uses the details and summary elements to create a collapsible section and enhances them aesthetically and functionally.

The JavaScript for the custom-details component adds functionality to buttons to expand and collapse the sections with one action. When JavaScript is disabled, the sections are still accessible and collapsible, but the extra buttons are hidden.

On page load, it checks if a hash corresponding to a details ID exists in the URL. If such an ID is found, the corresponding details section is programmatically opened, allowing direct navigation to an open section from a shared URL.

The sorting is set by default on “alphabetic”, but you can also pass in “shuffle” or “reverse” as a parameter.

Usage

{% set itemList = collections.docs %}{% include 'partials/details.njk' %}

Example

You are in the middle of a custom details component!

The custom-easteregg component is designed to trigger a confetti effect when a user types a specific keyword sequence. It uses the dynamic import of the canvas-confetti library to render custom-shaped particles based on user input.

Defaults:

• Keywords: "eleventy", "excellent" (default keywords can trigger effects).
• Shape: "⭐️" (default shape for particles unless overridden).
• Particle Count: 30 (default number of particles unless specified).

Customizable Attributes:

• keyword: Add a custom keyword to activate the effect.
• shape: Define a custom shape for the confetti particles using emojis or text.
• particle-count: Set the number of particles to release during the effect.

<script type="module" src="/assets/scripts/components/custom-easteregg.js"></script>
<custom-easteregg keyword="yay" shape="🌈" particle-count="50"></custom-easteregg>

Description

• Opening/Closing Images: Clicking a button linked to an image opens its dialog. A close button within each dialog allows the image to be hidden again.
• Includes gallery.css for styling the modal dialogs and backdrop.
• gallery.js manages modal dialog interactions.

Usage

{% include "partials/gallery.njk" %}

Example

Blog: Post with a gallery

The custom-masonry component is designed to function as a masonry grid by dynamically adjusting item positions based on the available column space and the size of its content. The necessary JavaScript (custom-masonry.js) is loaded only once per component usage due to the data-island="once" attribute.
Optional: pass in layout="50-50" to set a 50% width for each column.

<custom-masonry> (children) </custom-masonry>
<custom-masonry layout="50-50"> (children) </custom-masonry>

The @slug attribute is used to pass the video ID to the lite-youtube element.
@label ist used for the nested custom-youtube-link which adds a link to watch on YouTube. This also serves as a fallback in case JS is deactivated.
Uses the Lite YouTube Embed repository.

<custom-youtube @slug="Ah6je_bBSH8" @label="Alberto Ballesteros - Artista Sin Obra"> </custom-youtube>