Logo

Composant logo seul ou avec une baseline

Exemples

<kuik:logo link="/" image="/images/kuik-logo.svg" baseline="Documentation" />
<kuik:logo link="/" image="/images/kuik-logo.svg" />

Documentation

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

<div class="logo-wrapper">
    <kuik:logo link="/" image="/images/kuik-logo.svg" baseline="Documentation" alternative="Logo de la documentation" />
</div>
<div class="logo-wrapper">
    <kuik:logo link="/" image="/images/U7.svg" alternative="Logo de l'U7"/>
</div>

Name	Type	Required	Description
image	java.lang.String	true	Url de l'image du logo
alternative	java.lang.String	true	Alternative textuelle du logo
link	java.lang.String	false	Url du lien du logo
title	java.lang.String	false	Title du lien du logo
baseline	java.lang.String	false	Baseline du logo

.logo {
  --baseline-font-size: var(--font-size-120);
  --image-max-height: auto;
  --image-max-width: auto;
  --image-min-height: auto;
  --image-min-width: auto;
  --padding-bottom: 0;

  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--padding-bottom);
}

.logo__link {
  color: var(--neutral-100);
  text-decoration: none;

  &:hover {
    background: none;
  }
}

.logo__image {
  display: block;
  max-block-size: var(--image-max-height);
  max-inline-size: var(--image-max-width);
  min-block-size: var(--image-min-height);
  min-inline-size: var(--image-min-width);
}

.logo__baseline {
  font-size: var(--baseline-font-size);
  line-height: 100%;
}

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="image" required="true" type="java.lang.String" description="Url de l'image du logo" %>
<%@ attribute name="alternative" required="true" type="java.lang.String" description="Alternative textuelle du logo" %>
<%@ attribute name="link" required="false" type="java.lang.String" description="Url du lien du logo" %>
<%@ attribute name="title" required="false" type="java.lang.String" description="Title du lien du logo" %>
<%@ attribute name="baseline" required="false" type="java.lang.String" description="Baseline du logo" %>

<c:set var="classes" value="logo"/>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<div class="${pageScope.classes}" ${pageScope.attributes}>
    <c:choose>
        <c:when test="${empty pageScope.link}">
            <span>
                <img class="logo__image" src="<c:out value="${pageScope.image}" />" alt="${pageScope.alternative}">
            </span>
        </c:when>
        <c:otherwise>
            <a class="logo__link" href="<c:out value="${pageScope.link}" />"<c:if test="${not empty pageScope.title}"> title="${pageScope.title}"</c:if>>
                <img class="logo__image" src="<c:out value="${pageScope.image}" />" alt="${pageScope.alternative}">
            </a>
        </c:otherwise>
    </c:choose>
    <c:if test="${not empty pageScope.baseline}">
        <span class="logo__baseline"><c:out value="${pageScope.baseline}" escapeXml="false"/></span>
    </c:if>
</div>