Liste d'informations

Une liste d'objets possédant chacun un titre et un contenu.

Classes du composant

Modificateurs de tailles

info-list--sm : Small
info-list--md : Medium
info-list--lg : Large
info-list--xl : Extra-large

Size

sm

Title 1

Libero neque porttitor scelerisque sagittis magna dolor aliquam. Ullamcorper vitae nibh egestas at sed porttitor sit faucibus in. Felis faucibus ipsum libero eget eget consectetur congue eu pulvinar.

Title 2 un peu plus long

Urna nisi quam quam enim tristique vel scelerisque metus tincidunt morbi metus id metus erat eros eros gravida tortor orci amet nec maximus urna sollicitudin.

Nisi congue dolor nulla nunc proin euismod accumsan sem felis quam morbi tempus scelerisque nec molestie sit nunc aliquam hendrerit magna quisque mi sollicitudin felis.
Urna nec dolor accumsan diam elit eros tortor condimentum fusce mi commodo facilisis massa nunc eu id sollicitudin a sollicitudin fusce dolor nisl erat hendrerit.

Title 3

Consectetur diam rutrum facilisis quam aliquam varius quisque congue vel aliquam ipsum condimentum felis scelerisque aliquam accumsan cursus aliquam suspendisse ipsum ut mi varius cursus.

md

Title 1

Libero neque porttitor scelerisque sagittis magna dolor aliquam. Ullamcorper vitae nibh egestas at sed porttitor sit faucibus in. Felis faucibus ipsum libero eget eget consectetur congue eu pulvinar.

Title 2 un peu plus long

Urna nisi quam quam enim tristique vel scelerisque metus tincidunt morbi metus id metus erat eros eros gravida tortor orci amet nec maximus urna sollicitudin.

Title 3

Consectetur diam rutrum facilisis quam aliquam varius quisque congue vel aliquam ipsum condimentum felis scelerisque aliquam accumsan cursus aliquam suspendisse ipsum ut mi varius cursus.

lg

Title 1

Libero neque porttitor scelerisque sagittis magna dolor aliquam. Ullamcorper vitae nibh egestas at sed porttitor sit faucibus in. Felis faucibus ipsum libero eget eget consectetur congue eu pulvinar.

Title 2 un peu plus long

Urna nisi quam quam enim tristique vel scelerisque metus tincidunt morbi metus id metus erat eros eros gravida tortor orci amet nec maximus urna sollicitudin.

Title 3

Consectetur diam rutrum facilisis quam aliquam varius quisque congue vel aliquam ipsum condimentum felis scelerisque aliquam accumsan cursus aliquam suspendisse ipsum ut mi varius cursus.

xl

Title 1

Libero neque porttitor scelerisque sagittis magna dolor aliquam. Ullamcorper vitae nibh egestas at sed porttitor sit faucibus in. Felis faucibus ipsum libero eget eget consectetur congue eu pulvinar.

Title 2 un peu plus long

Urna nisi quam quam enim tristique vel scelerisque metus tincidunt morbi metus id metus erat eros eros gravida tortor orci amet nec maximus urna sollicitudin.

Title 3

Consectetur diam rutrum facilisis quam aliquam varius quisque congue vel aliquam ipsum condimentum felis scelerisque aliquam accumsan cursus aliquam suspendisse ipsum ut mi varius cursus.

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<kuik:heading size="lg" skin="a" title="Size" level="3"/>

<%--@elvariable id="infoListViewModel" type="java.util.List"--%>

<kuik:heading size="lg" title="sm" level="4"/>
<kuik:info-list size="sm">
    <c:forEach items="${infoListViewModel}" var="info">
        <kuik:info-list-item title="${info.title}">
            <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
        </kuik:info-list-item>
    </c:forEach>
</kuik:info-list>

<kuik:heading size="lg" title="md" level="4"/>
<kuik:info-list size="md">
    <c:forEach items="${infoListViewModel}" var="info">
        <kuik:info-list-item title="${info.title}">
            <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
        </kuik:info-list-item>
    </c:forEach>
</kuik:info-list>

<kuik:heading size="lg" title="lg" level="4"/>
<kuik:info-list size="lg">
    <c:forEach items="${infoListViewModel}" var="info">
        <kuik:info-list-item title="${info.title}">
            <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
        </kuik:info-list-item>
    </c:forEach>
</kuik:info-list>

<kuik:heading size="lg" title="xl" level="4"/>
<kuik:info-list size="xl">
    <c:forEach items="${infoListViewModel}" var="info">
        <kuik:info-list-item title="${info.title}">
            <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
        </kuik:info-list-item>
    </c:forEach>
</kuik:info-list>

Name	Type	Required	Description
title	java.lang.String	true	Le titre de l'information

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>

<%@ attribute name="title" required="true" type="java.lang.String" description="Le titre de l'information" %>

<div class="info-list-item">
    <div class="info-list-item__title">${title}</div>
    <div class="info-list-item__description">
        <jsp:doBody/>
    </div>
</div>

@use 'mixins/mixins-customizables' as custom;

$prefix: 'info-list';
$prefix-item: 'info-list-item';
$prefix-item-title: 'info-list-item-title';
$prefix-item-description: 'info-list-item-description';

.info-list {
    @include custom.component($prefix, true);

  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 0;
}

.info-list-item {
    @include custom.component($prefix-item, true);

  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.info-list-item__title {
    @include custom.component($prefix-item-title, true);

  align-content: center;
}

.info-list-item__description {
    @include custom.component($prefix-item-description, true);

  margin-inline-start: 0;
}

.info-list--sm, .info-list--md, .info-list--lg, .info-list--xl {
  .info-list-item {
      @include custom.component($prefix-item);
  }

  .info-list-item__title {
      @include custom.component($prefix-item-title);
  }

  .info-list-item__description {
      @include custom.component($prefix-item-description);
  }
}

*:has(> .info-list) {
  container-type: inline-size;
}

@container (width < 30rem) {
  .info-list {
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
  }
}