Citation longue

Le composant blockquote se compose d'un bloc de citation longue.

Classes du composant

Modificateurs de tailles

.blockquote--sm : Small
.blockquote--md : Medium
.blockquote--lg : Large
.blockquote--xl : Extra-large

Exemples

<kuik:blockquote size="lg">Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</kuik:blockquote>

Size

sm

Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.

md

Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.

lg

Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.

xl

Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.

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

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

<kuik:heading size="lg" title="sm" level="4" />
<kuik:blockquote size="sm">Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</kuik:blockquote>

<kuik:heading size="lg" title="md" level="4" />
<kuik:blockquote size="md">Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</kuik:blockquote>

<kuik:heading size="lg" title="lg" level="4" />
<kuik:blockquote size="lg">Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</kuik:blockquote>

<kuik:heading size="lg" title="xl" level="4" />
<kuik:blockquote size="xl">Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</kuik:blockquote>

Name	Type	Required	Description
size	java.lang.String	false	Taille (défaut : sm)
author	java.lang.String	false	Auteur de la citation
icon	java.lang.String	false	Icône de la citation

$prefix: 'blockquote';
$prefix-content: 'blockquote-content';

// 20-60 citation
.blockquote {
  @include custom-space($prefix, true);
  @include custom-border($prefix, true);
  @include custom-color($prefix, true);
  @include custom-typo($prefix, true);

  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.blockquote__icon {
  @include custom-icon-color;
}

.blockquote__content {
  @include custom-typo($prefix-content, true);

  font-style: normal;
}

.blockquote--sm , .blockquote--md, .blockquote--lg, .blockquote--xl {
  @include custom-space($prefix);
  @include custom-border($prefix);
  @include custom-typo($prefix);

  .blockquote__content {
    @include custom-typo($prefix-content);
  }
}

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

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="author" required="false" type="java.lang.String" description="Auteur de la citation" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="Icône de la citation" %>

<c:if test="${empty pageScope.icon}">
    <c:set var="icon" value="icon://ui/comment-quote"/>
</c:if>

<c:if test="${empty pageScope.size}">
    <c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="blockquote--${pageScope.size}"/>

<c:set value="blockquote ${pageScope.classesSize}" var="classes"/>

<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>

<blockquote class="${pageScope.classes}" ${pageScope.attributes}>
    <kuik:icon title="" class="blockquote__icon" source="${pageScope.icon}" size="${size}"/>
    <div class="blockquote__content">
        <jsp:doBody/>
    </div>
</blockquote>