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 : Small
emphasis--md : Medium
emphasis--lg : Large
emphasis--xl : Extra-large

Modificateurs d'apparence

emphasis--0 : Style 0
emphasis--1 : Style 1
emphasis--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>