<div class="flex flex-row space-x-48 p-8">
<!-- Simple links -->
<div class="flex flex-col gap-y-6 justify-start items-start">
<!-- Link / sm -->
<a href="#" class=" text-sm">
Link
</a>
<!-- Link / base -->
<a href="#" class=" text-base">
Link
</a>
<!-- Link / lg -->
<a href="#" class=" text-lg">
Link
</a>
<!-- Link / xl -->
<a href="#" class=" text-xl">
Link
</a>
</div>
<!-- Trailing icon links -->
<div class="flex flex-col gap-y-6 justify-start items-start">
<!-- Link / sm / Tailing icon -->
<a href="#" class=" text-sm link-trailing-icon">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
<!-- Link / base / Tailing icon -->
<a href="#" class=" text-base link-trailing-icon">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
<!-- Link / lg / Tailing icon -->
<a href="#" class=" text-lg link-trailing-icon">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
<!-- Link / xl / Tailing icon -->
<a href="#" class=" text-xl link-trailing-icon">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
<!-- Leading icon links -->
<div class="flex flex-col gap-y-6 items-start">
<!-- Link / sm / Leading icon -->
<a href="#" class=" text-sm link-leading-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
<!-- Link / base / Leading icon -->
<a href="#" class=" text-base link-leading-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
<!-- Link / lg / Leading icon -->
<a href="#" class=" text-lg link-leading-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
<!-- Link / xl / Leading icon -->
<a href="#" class=" text-xl link-leading-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
</div>
<!-- Underlined links -->
<div class="flex flex-col gap-y-6 items-start">
<!-- Link / sm / Underlined -->
<a href="#" class="is-underlined text-sm">
Link
</a>
<!-- Link / base / Underlined -->
<a href="#" class="is-underlined text-base">
Link
</a>
<!-- Link / lg / Underlined -->
<a href="#" class="is-underlined text-lg">
Link
</a>
<!-- Link / xl / Underlined -->
<a href="#" class="is-underlined text-xl">
Link
</a>
</div>
</div>
<div class="flex flex-row space-x-48 bg-[#383838] p-8">
<!-- Simple links / light -->
<div class="flex flex-col gap-y-6 items-start">
<!-- Link / Light / sm -->
<a href="#" class=" text-sm link-light">
Link
</a>
<!-- Link / Light / base -->
<a href="#" class=" text-base link-light">
Link
</a>
<!-- Link / Light / lg -->
<a href="#" class=" text-lg link-light">
Link
</a>
<!-- Link / Light / xl -->
<a href="#" class=" text-xl link-light">
Link
</a>
</div>
<!-- Trailing icon links / light -->
<div class="flex flex-col gap-y-6 items-start">
<!-- Link / Light / sm / Trailing icon -->
<a href="#" class=" text-sm link-trailing-icon link-light">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
<!-- Link / Light / base / Trailing icon -->
<a href="#" class=" text-base link-trailing-icon link-light">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
<!-- Link / Light / lg / Trailing icon -->
<a href="#" class=" text-lg link-trailing-icon link-light">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
<!-- Link / Light / xl / Trailing icon -->
<a href="#" class=" text-xl link-trailing-icon link-light">
Link
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
<!-- Leading icon links / light -->
<div class="flex flex-col gap-y-6 items-start">
<!-- Link / Light / sm / Leading icon -->
<a href="#" class=" text-sm link-leading-icon link-light">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
<!-- Link / Light / base / Leading icon -->
<a href="#" class=" text-base link-leading-icon link-light">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
<!-- Link / Light / lg / Leading icon -->
<a href="#" class=" text-lg link-leading-icon link-light">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
<!-- Link / Light / xl / Leading icon -->
<a href="#" class=" text-xl link-leading-icon link-light">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
</div>
<!-- Underlined links / light -->
<div class="flex flex-col gap-y-6 items-start">
<!-- Link / Light / sm / Underlined -->
<a href="#" class="is-underlined text-sm link-light">
Link
</a>
<!-- Link / Light / base / Underlined -->
<a href="#" class="is-underlined text-base link-light">
Link
</a>
<!-- Link / Light / lg / Underlined -->
<a href="#" class="is-underlined text-lg link-light">
Link
</a>
<!-- Link / Light / xl / Underlined -->
<a href="#" class="is-underlined text-xl link-light">
Link
</a>
</div>
</div>
<div class="flex flex-row space-x-48 p-8">
<!-- Simple links -->
<div class="flex flex-col gap-y-6 justify-start items-start">
{% for link in links %}
<!-- Link / {{ link.size }} -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label} %}
{% endfor %}
</div>
<!-- Trailing icon links -->
<div class="flex flex-col gap-y-6 justify-start items-start">
{% for link in linksWithIcons %}
<!-- Link / {{ link.size }} / Tailing icon -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label,type:'trailing-icon'} %}
{% endfor %}
</div>
<!-- Leading icon links -->
<div class="flex flex-col gap-y-6 items-start">
{% for link in linksWithIconsLeading %}
<!-- Link / {{ link.size }} / Leading icon -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label,type:'leading-icon'} %}
{% endfor %}
</div>
<!-- Underlined links -->
<div class="flex flex-col gap-y-6 items-start">
{% for link in linksUnderline %}
<!-- Link / {{ link.size }} / Underlined -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label,underlined:true} %}
{% endfor %}
</div>
</div>
<div class="flex flex-row space-x-48 bg-[#383838] p-8">
<!-- Simple links / light -->
<div class="flex flex-col gap-y-6 items-start">
{% for link in linksDarkBg %}
<!-- Link / Light / {{ link.size }} -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label,color:'light'} %}
{% endfor %}
</div>
<!-- Trailing icon links / light -->
<div class="flex flex-col gap-y-6 items-start">
{% for link in linksWithIconsDarkBg %}
<!-- Link / Light / {{ link.size }} / Trailing icon -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label,type:'trailing-icon',color:'light'} %}
{% endfor %}
</div>
<!-- Leading icon links / light -->
<div class="flex flex-col gap-y-6 items-start">
{% for link in linksWithIconsLeadingDarkBg %}
<!-- Link / Light / {{ link.size }} / Leading icon -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label,type:'leading-icon',color:'light'} %}
{% endfor %}
</div>
<!-- Underlined links / light -->
<div class="flex flex-col gap-y-6 items-start">
{% for link in linksUnderlineDarkBg %}
<!-- Link / Light / {{ link.size }} / Underlined -->
{% render "@template-link" with {href:link.href,size:link.size,label:link.label,underlined:true,color:'light'} %}
{% endfor %}
</div>
</div>
{
"links": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
],
"linksWithIcons": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
],
"linksDarkBg": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
],
"linksWithIconsDarkBg": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
],
"linksWithIconsLeading": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
],
"linksWithIconsLeadingDarkBg": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
],
"linksUnderlineDarkBg": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
],
"linksUnderline": [
{
"label": "Link",
"size": "sm",
"href": "#"
},
{
"label": "Link",
"size": "base",
"href": "#"
},
{
"label": "Link",
"size": "lg",
"href": "#"
},
{
"label": "Link",
"size": "xl",
"href": "#"
}
]
}
{% render "@template-link" with {...} %}{% render "@template-link" with {href:link.href,size:link.size,label:link.label,underlined:true,color:'light'} %}sm, base , lg, xl | default: baselight, dark | default: darkleading-icon, trailing-icon | default: ``string | default: Linktrue, false | default: falsestring | default: #object:string | default: libray--arrow-leftlibray, social or afflelou before the icon namestring | default: null