Listes

Composant de listes

Liste invisible

Élément un
Élément deux
Élément trois

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading level="2">Liste invisible</kuik:heading>

<ul class="u-list-naked">
    <li>Élément un</li>
    <li>Élément deux</li>
    <li>Élément trois</li>
</ul>

// Liste d'items horizontal
.list--inlined {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;

  .list__item {
    list-style-type: none;
  }
}

// Liste de cartouches
.list--cartouches {
  .cartouche {
    vertical-align: top;
  }
}

// Liste de liens
.list-link {
  --list-link-title-font-size: var(--font-size-50);
  --list-link-text-font-size: var(--font-size-50);
}

.list-link__list {
  @include list-reset;
}

.list-link__title {
  font-size: var(--list-link-title-font-size);
  font-weight: var(--font-weight-700);
  margin-block-end: var(--space-3);
  margin-block-start: var(--space-0);
}

.list-link__link {
  font-size: var(--list-link-text-font-size);
  line-height: 150%;
  text-decoration: none;
}

// Variantes de tailles
.list-link--lg {
  --list-link-title-font-size: var(--font-size-70);
  --list-link-text-font-size: var(--font-size-50);
}

.list-link--xl {
  --list-link-title-font-size: var(--font-size-100);
  --list-link-text-font-size: var(--font-size-70);
}