Mise en exergue
Une zone mise en valeur au sein d'une page, grâce à son apparence. Elle contient un titre et un contenu.
Classes du composant
Modificateurs de tailles
emphasis--sm: Smallemphasis--md: Mediumemphasis--lg: Largeemphasis--xl: Extra-large
Modificateurs d'apparence
emphasis--0: Style 0emphasis--1: Style 1emphasis--2: Style 2
Exemples
<kuik:emphasis title="Titre de la mise en exergue" size="xl" style="2">
Contenu libre de la mise en exergue
</kuik:emphasis>
Size
Titre mise en exergue
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
Titre mise en exergue
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
Titre mise en exergue
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
Titre mise en exergue
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
Style
Titre mise en exergue
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
Titre mise en exergue
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
Titre mise en exergue
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
Without title
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
<%@ 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" />
<kuik:emphasis size="sm" title="Titre mise en exergue">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
<kuik:emphasis size="md" title="Titre mise en exergue">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
<kuik:emphasis size="lg" title="Titre mise en exergue">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
<kuik:emphasis size="xl" title="Titre mise en exergue">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
<kuik:heading size="lg" skin="a" title="Style" level="3" />
<kuik:emphasis skin="a" title="Titre mise en exergue">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
<kuik:emphasis skin="b" title="Titre mise en exergue">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
<kuik:emphasis skin="c" title="Titre mise en exergue">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
<kuik:heading size="lg" skin="a" title="Without title" level="3" />
<kuik:emphasis skin="c">
Je suis sûr que l'univers est plein de vie intelligente. Elle a juste été trop intelligente pour venir ici.
</kuik:emphasis>
| Name | Type | Required | Description |
|---|---|---|---|
| title | java.lang.String | false | Titre de la mise en exergue |
| size | java.lang.String | false | Taille de la mise en exergue (Défaut : sm) |
| skin | java.lang.String | false | Skin de la mise en exergue (Défaut : a) |
$prefix: 'emphasis';
$prefix-title: 'heading';
$prefix-content: 'emphasis-content';
.emphasis {
--emphasis-margin-bottom: var(--space-6);
@include custom-color($prefix, true);
@include custom-padding($prefix, true);
@include custom-border($prefix, true);
display: block;
margin-bottom: var(--emphasis-margin-bottom);
.heading {
@include custom-typo($prefix-title, true);
}
}
.emphasis__title {
--emphasis-title-margin-bottom: var(--space-2);
line-height: 130%;
margin-bottom: var(--emphasis-title-margin-bottom);
margin-top: var(--space-0);
}
.emphasis__content {
@include custom-typo($prefix-content, true);
}
.emphasis--skin-a, .emphasis--skin-b, .emphasis--skin-c {
@include custom-color($prefix);
&.emphasis--sm, &.emphasis--md, &.emphasis--lg, &.emphasis--xl {
@include custom-padding($prefix);
@include custom-border($prefix);
.heading {
@include custom-typo($prefix-title);
}
.emphasis__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="title" required="false" type="java.lang.String" description="Titre de la mise en exergue" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille de la mise en exergue (Défaut : sm)" %>
<%@ attribute name="skin" required="false" type="java.lang.String" description="Skin de la mise en exergue (Défaut : a)" %>
<c:if test="${empty pageScope.size}">
<c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="emphasis--${pageScope.size}"/>
<c:if test="${empty pageScope.skin}">
<c:set var="skin" value="a"/>
</c:if>
<c:set var="classesSkin" value="emphasis--skin-${pageScope.skin}"/>
<c:set var="classes" value="emphasis ${pageScope.classesSize} ${pageScope.classesSkin}"/>
<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>
<section class="${pageScope.classes}" ${pageScope.attributes}>
<c:if test="${not empty pageScope.title}">
<kuik:heading title="${pageScope.title}" level="4" class="emphasis__title"/>
</c:if>
<div class="emphasis__content">
<jsp:doBody/>
</div>
</section>