Links

This include file generates a collection of link cards, typically used for displaying a set of important links on a page.

Usage

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

<div class="width-full">
  <div class="d-flex flex-column mb-4">
    <div class="mb-2">
<a href="/jekyll-theme-profile/page/topbar"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/topbar-icon.png" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example page with topbar">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example page with topbar</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
    <div class="mb-2">
<a href="/jekyll-theme-profile/page/appbar"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/appbar-icon.png" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example page with appbar">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example page with appbar</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
    <div class="mb-2">
<a href="/jekyll-theme-profile/page/sidebar"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/sidebar-icon.png" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example page with sidebar">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example page with sidebar</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
    <div class="mb-2">
<a href="/jekyll-theme-profile/page/stacked"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/stacked-icon.png" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example page with header stacked">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example page with header stacked</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
    <div class="mb-2">
<a href="/jekyll-theme-profile/background"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/icon-bg.png" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example custom background">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example custom background</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
    <div class="mb-2">
<a href="/jekyll-theme-profile/linktree"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/links.png" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example Linktree page">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example Linktree page</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
    <div class="mb-2">
<a href="/jekyll-theme-profile/profile"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/user-image.jpg" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example Profile page">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example Profile page</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
    <div class="mb-2">
<a href="/jekyll-theme-profile/repositories"
  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
    <div class="avatar-7">
      <img src="/jekyll-theme-profile/media/repositories.png" width="48" height="48"
        class="rounded-2 box-shadow-none img-cover float-left" alt="Example Reposotiries page">
    </div>
    <div class="p-2">
      <p class="f3 text-center mb-0">Example Reposotiries page</p>
    </div>
    <div class="avatar-7"></div>
</a>

    </div>
  </div>
</div>

Parameters

This include doesn’t accept direct parameters. Instead, it relies on page or site-wide variables:

Variable	Default	Description
`page.links`	`site.links`	The collection of links to display

Functionality

The include looks for a links variable, first on the current page, then falling back to the site configuration.
It creates a container for the link cards.
It iterates through each link in the collection and includes a link-card.html for each one.

Dependencies

This include file depends on:

link-card.html: Another include file that defines how each link card is displayed.

Customization

To customize the appearance of the links collection:

Modify the CSS classes in this file to change the layout and spacing.
Edit the link-card.html include to change how individual links are displayed.
Adjust the container structure if you need a different layout for the links.

Notes

Ensure that you have defined a links collection either in your page front matter or in your site’s configuration.
The layout uses flexbox for responsive design, allowing the links to adapt to different screen sizes.