---
title: Link Group
description: A group of links, typically used for navigation or related resources.
links:
- link: "#"
linkText: Lorem Ipsum
- link: "#"
linkText: Dolor Sit Amet
- link: "#"
linkText: Consectetur
cms:
- name: links
label: Links
widget: list
listItemLabel: Link
fields:
- name: link
label: Link URL
widget: string
- name: linkText
label: Link Text
widget: string
---
{# Optional component CSS #}
{%- componentCss -%}
.block-link-group nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: var(--unit);
flex-wrap: wrap;
}
@media (min-width: 992px) {
.block-link-group nav {
flex-direction: row;
}
}
{%- endcomponentCss -%}
{# Component HTML, using the default values above #}
<section class="block block-{{ title | slugify }}">
<div class="container">
<nav>
{%- for link in links -%}
<a href="{{ link.link }}">{{ link.linkText }}</a>
{%- endfor -%}
</nav>
</div>
</section>