Link Card

This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.

Usage

To use this include in your Jekyll theme, add the following line to your template:

<div class="Link-text github-component position-relative height-full d-flex flex-column text-center p-1">
  <div class="d-inline-flex flex-items-center">
    <div class="avatar-7">
    </div>
    <div class="flex-auto">
    <p class="f3 lh-condensed text-center mt-1"></p>
    </div>
    <div class="avatar-7"></div>
  </div>
</div>

Parameters

You can customize the behavior of this include by passing a link object with the following properties:

Property	Required	Description
`name`	Yes	The name or title of the link
`url`	No	The URL for the link. If not provided, the card will be displayed as text-only
`thumbnail`	No	The path to an image to be used as a thumbnail
`description`	No	A brief description of the link
`octicon`	No	An Octicon name to display instead of a thumbnail

Example with parameters:

<div class="Link-text github-component position-relative height-full d-flex flex-column text-center p-1">
  <div class="d-inline-flex flex-items-center">
    <div class="avatar-7">
    </div>
    <div class="flex-auto">
    <p class="f3 lh-condensed text-center mt-1"></p>
    </div>
    <div class="avatar-7"></div>
  </div>
</div>

Functionality

The include checks if a URL is provided for the link.
If a URL is present:
- It creates a clickable card with hover effects.
- Displays a thumbnail image or Octicon if provided.
- Shows the link name and description (if available).
If no URL is present:
- It creates a non-clickable text card.
- Displays a thumbnail image if provided.
- Shows the link name and description (if available).

Dependencies

This include file may depend on:

Octicons: The GitHub icon set, used if an octicon property is specified.

Notes

The include uses Liquid tags and filters, such as relative_url, to ensure correct URL generation.
The octicon functionality assumes you have the Octicons library or a similar icon system set up in your theme.
The include uses responsive design principles with flexbox for layout.