Note

La note, insérée à l’aide du code « notice », met en évidence une action, un résultat ou un message. Voir l’aide-mémoire pour les paramètres.

Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.

<div class="bocss-notice bocss-notice--info">
    
    <div id="bocss-icon-paper-edit" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M11.246,24c-0.2,0-0.389-0.078-0.53-0.22c-0.178-0.177-0.255-0.431-0.205-0.677l0.75-3.75
		c0.029-0.146,0.1-0.279,0.205-0.384l7.631-7.63c0.54-0.541,1.26-0.839,2.026-0.839c0.764,0,1.483,0.297,2.022,0.835
		c0.545,0.546,0.846,1.27,0.847,2.037c0.001,0.767-0.297,1.487-0.839,2.027l-7.627,7.629c-0.105,0.105-0.238,0.177-0.384,0.205
		l-3.749,0.75C11.344,23.995,11.295,24,11.246,24z M12.202,22.294l2.424-0.485l7.467-7.469c0.533-0.532,0.535-1.399,0.003-1.932
		c-0.012-0.011-0.026-0.025-0.03-0.03c-0.241-0.24-0.579-0.379-0.941-0.379c-0.366,0-0.71,0.142-0.968,0.401l-7.471,7.47
		L12.202,22.294z"/>
	<path d="M2.242,21c-1.241,0-2.25-1.009-2.25-2.25V2.25c0-1.241,1.009-2.25,2.25-2.25h15c1.241,0,2.25,1.009,2.25,2.25V9
		c0,0.414-0.336,0.75-0.75,0.75s-0.75-0.336-0.75-0.75V2.25c0-0.414-0.336-0.75-0.75-0.75h-15c-0.414,0-0.75,0.336-0.75,0.75v16.5
		c0,0.414,0.336,0.75,0.75,0.75h6c0.414,0,0.75,0.336,0.75,0.75S8.655,21,8.242,21H2.242z"/>
	<path d="M8.242,6c-0.414,0-0.75-0.336-0.75-0.75S7.828,4.5,8.242,4.5h6c0.414,0,0.75,0.336,0.75,0.75S14.655,6,14.242,6H8.242z"/>
	<path d="M5.242,10.5c-0.414,0-0.75-0.336-0.75-0.75S4.828,9,5.242,9h9c0.414,0,0.75,0.336,0.75,0.75s-0.336,0.75-0.75,0.75H5.242z"
		/>
	<path d="M5.242,15c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h7.5c0.414,0,0.75,0.336,0.75,0.75S13.155,15,12.742,15
		H5.242z"/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat."]
            

Succès

  • Action exécutée ou formulaire envoyé avec succès
  • Affiché sous l’action exécutée, ou à la place du formulaire lorsque l’action est exécutée avec succès
  • Icône par défaut : crochet dans un cercle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.

<div class="bocss-notice bocss-notice--success">
    
    <div id="bocss-icon-circle-check" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M9.325,17.916c-0.117,0-0.235-0.012-0.352-0.035c-0.472-0.094-0.879-0.365-1.146-0.764l-2.44-3.462
		c-0.238-0.338-0.157-0.807,0.181-1.045C5.695,12.52,5.844,12.473,6,12.473c0.244,0,0.473,0.119,0.614,0.318l2.45,3.477
		c0.054,0.081,0.12,0.126,0.201,0.142c0.02,0.004,0.04,0.006,0.06,0.006c0.058,0,0.115-0.018,0.164-0.051
		c0.028-0.019,0.052-0.042,0.072-0.068l7.852-9.935C17.555,6.182,17.769,6.078,18,6.078c0.168,0,0.333,0.057,0.464,0.161
		c0.157,0.124,0.257,0.302,0.28,0.501c0.023,0.199-0.032,0.395-0.156,0.552l-7.843,9.923c-0.113,0.149-0.257,0.284-0.423,0.396
		C10.025,17.811,9.68,17.916,9.325,17.916z"/>
	<path d="M12,23.999c-6.617,0-12-5.383-12-12c0-6.617,5.383-12,12-12c6.617,0,12,5.383,12,12C24,18.616,18.617,23.999,12,23.999z
		 M12,1.499c-5.79,0-10.5,4.71-10.5,10.5c0,5.79,4.71,10.5,10.5,10.5c5.79,0,10.5-4.71,10.5-10.5C22.5,6.209,17.79,1.499,12,1.499z"
		/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat." theme="success"]
            

Note accessoire

  • Élément d’information complémentaire, p. ex. prochaine étape ou pratique exemplaire
    • Pour un effet optimal : inclure une seule idée par note
  • Habituellement placé dans le contenu ou après
  • Icône par défaut : ampoule

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.

<div class="bocss-notice bocss-notice--aside">
    
    <div id="bocss-icon-bulb" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M12,3c-0.414,0-0.75-0.336-0.75-0.75v-1.5C11.25,0.336,11.586,0,12,0s0.75,0.336,0.75,0.75v1.5C12.75,2.664,12.414,3,12,3z
		"/>
	<path d="M1.5,12c-0.414,0-0.75-0.336-0.75-0.75S1.086,10.5,1.5,10.5H3c0.414,0,0.75,0.336,0.75,0.75S3.414,12,3,12H1.5z"/>
	<path d="M4.85,5.557c-0.195,0-0.379-0.074-0.52-0.209l-1.1-1.057C2.932,4.004,2.923,3.528,3.209,3.23C3.35,3.084,3.547,3,3.75,3
		C3.945,3,4.129,3.074,4.27,3.209l1.1,1.057C5.514,4.405,5.596,4.592,5.6,4.792c0.004,0.2-0.07,0.39-0.209,0.535
		C5.25,5.473,5.053,5.557,4.85,5.557z"/>
	<path d="M21,12c-0.414,0-0.75-0.336-0.75-0.75S20.586,10.5,21,10.5h1.5c0.414,0,0.75,0.336,0.75,0.75S22.914,12,22.5,12H21z"/>
	<path d="M19.15,5.557c-0.203,0-0.4-0.084-0.541-0.23c-0.287-0.299-0.277-0.774,0.021-1.061l1.1-1.057
		C19.871,3.074,20.055,3,20.25,3c0.203,0,0.4,0.084,0.541,0.23c0.287,0.299,0.277,0.774-0.021,1.061l-1.1,1.057
		C19.529,5.483,19.344,5.557,19.15,5.557z"/>
	<path d="M10.5,24c-1.241,0-2.25-1.009-2.25-2.25v-4.008c-2.319-1.307-3.784-3.832-3.75-6.498c0.071-4.13,3.359-7.421,7.487-7.495
		c4.146,0.073,7.44,3.362,7.513,7.487c0.035,2.67-1.429,5.198-3.75,6.506v4.008c0,1.241-1.009,2.25-2.25,2.25H10.5z M9.75,21.75
		c0,0.414,0.336,0.75,0.75,0.75h3c0.414,0,0.75-0.336,0.75-0.75V21h-4.5V21.75z M14.25,19.5V18h-4.5v1.5H14.25z M14.903,16.5
		c1.913-1.022,3.126-3.068,3.097-5.24c-0.059-3.311-2.7-5.951-6.013-6.01C8.692,5.309,6.057,7.952,6,11.267
		c-0.028,2.167,1.185,4.212,3.097,5.233H9.75v-3H9c-1.241,0-2.25-1.009-2.25-2.25C6.75,10.009,7.759,9,9,9s2.25,1.009,2.25,2.25V12
		h1.5v-0.75C12.75,10.009,13.759,9,15,9s2.25,1.009,2.25,2.25c0,1.241-1.009,2.25-2.25,2.25h-0.75v3H14.903z M12.75,16.5v-3h-1.5v3
		H12.75z M15,12c0.414,0,0.75-0.336,0.75-0.75S15.414,10.5,15,10.5s-0.75,0.336-0.75,0.75V12H15z M9,10.5
		c-0.414,0-0.75,0.336-0.75,0.75S8.586,12,9,12h0.75v-0.75C9.75,10.836,9.414,10.5,9,10.5z"/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat." theme="aside"]
            

Information

  • Message éphémère concernant la page
  • Habituellement placé sous le titre principal ou entre le chapeau et le contenu
  • Icône par défaut : document papier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.

<div class="bocss-notice bocss-notice--info">
    
    <div id="bocss-icon-paper-edit" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M11.246,24c-0.2,0-0.389-0.078-0.53-0.22c-0.178-0.177-0.255-0.431-0.205-0.677l0.75-3.75
		c0.029-0.146,0.1-0.279,0.205-0.384l7.631-7.63c0.54-0.541,1.26-0.839,2.026-0.839c0.764,0,1.483,0.297,2.022,0.835
		c0.545,0.546,0.846,1.27,0.847,2.037c0.001,0.767-0.297,1.487-0.839,2.027l-7.627,7.629c-0.105,0.105-0.238,0.177-0.384,0.205
		l-3.749,0.75C11.344,23.995,11.295,24,11.246,24z M12.202,22.294l2.424-0.485l7.467-7.469c0.533-0.532,0.535-1.399,0.003-1.932
		c-0.012-0.011-0.026-0.025-0.03-0.03c-0.241-0.24-0.579-0.379-0.941-0.379c-0.366,0-0.71,0.142-0.968,0.401l-7.471,7.47
		L12.202,22.294z"/>
	<path d="M2.242,21c-1.241,0-2.25-1.009-2.25-2.25V2.25c0-1.241,1.009-2.25,2.25-2.25h15c1.241,0,2.25,1.009,2.25,2.25V9
		c0,0.414-0.336,0.75-0.75,0.75s-0.75-0.336-0.75-0.75V2.25c0-0.414-0.336-0.75-0.75-0.75h-15c-0.414,0-0.75,0.336-0.75,0.75v16.5
		c0,0.414,0.336,0.75,0.75,0.75h6c0.414,0,0.75,0.336,0.75,0.75S8.655,21,8.242,21H2.242z"/>
	<path d="M8.242,6c-0.414,0-0.75-0.336-0.75-0.75S7.828,4.5,8.242,4.5h6c0.414,0,0.75,0.336,0.75,0.75S14.655,6,14.242,6H8.242z"/>
	<path d="M5.242,10.5c-0.414,0-0.75-0.336-0.75-0.75S4.828,9,5.242,9h9c0.414,0,0.75,0.336,0.75,0.75s-0.336,0.75-0.75,0.75H5.242z"
		/>
	<path d="M5.242,15c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h7.5c0.414,0,0.75,0.336,0.75,0.75S13.155,15,12.742,15
		H5.242z"/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat." theme="info"]
            

Erreur

  • Pour signaler une action non complétée dans un formulaire
  • Habituellement placé sous l’action non complétée
  • Icône par défaut : croix dans un cercle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.

<div class="bocss-notice bocss-notice--error">
    
    <div id="bocss-icon-circle-x" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M11.998,24c-6.617,0-12-5.383-12-12c0-6.617,5.383-12,12-12c6.617,0,12,5.383,12,12C23.998,18.617,18.615,24,11.998,24z
		 M11.998,1.5c-5.79,0-10.5,4.71-10.5,10.5c0,5.79,4.71,10.5,10.5,10.5c5.79,0,10.5-4.71,10.5-10.5
		C22.498,6.21,17.788,1.5,11.998,1.5z"/>
	<path d="M16.498,17.25c-0.2,0-0.389-0.078-0.53-0.22l-3.97-3.97l-3.969,3.97c-0.141,0.142-0.33,0.22-0.53,0.22
		c-0.2,0-0.389-0.078-0.53-0.22c-0.142-0.142-0.22-0.33-0.22-0.53s0.078-0.389,0.22-0.53L10.937,12l-3.97-3.97
		C6.825,7.889,6.747,7.7,6.747,7.5c0-0.2,0.078-0.389,0.22-0.53c0.141-0.142,0.33-0.22,0.53-0.22s0.389,0.078,0.53,0.22l3.97,3.97
		l3.969-3.97c0.142-0.142,0.33-0.22,0.53-0.22s0.389,0.078,0.53,0.22c0.142,0.141,0.22,0.33,0.22,0.53c0,0.2-0.078,0.389-0.22,0.53
		L13.058,12l3.97,3.97c0.142,0.142,0.22,0.33,0.22,0.53s-0.078,0.389-0.22,0.53S16.698,17.25,16.498,17.25z"/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat." theme="error"]
            

Avertissement

  • Pour inviter le lecteur à s’arrêter et à lire avant de poursuivre
    • Pour un effet optimal : inclure une seule idée par note
  • Habituellement placé sous le titre principal ou dans le contenu
  • Icône par défaut : triangle d’alerte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.

<div class="bocss-notice bocss-notice--warn">
    
    <div id="bocss-icon-alert-triangle" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M12,20.251c-0.62,0-1.125-0.505-1.125-1.125s0.505-1.125,1.125-1.125c0.62,0,1.125,0.505,1.125,1.125
		S12.62,20.251,12,20.251z"/>
	<path d="M12,16.501c-0.414,0-0.75-0.336-0.75-0.75v-7.5c0-0.414,0.336-0.75,0.75-0.75c0.413,0,0.75,0.336,0.75,0.75v7.5
		C12.75,16.164,12.413,16.501,12,16.501z"/>
	<path d="M2.272,24.001c-0.347,0-0.693-0.081-1.003-0.233c-0.543-0.267-0.951-0.731-1.147-1.305s-0.157-1.191,0.111-1.734
		L9.705,1.43c0.248-0.505,0.663-0.919,1.167-1.167c0.354-0.174,0.732-0.262,1.124-0.262c0.984,0,1.865,0.547,2.298,1.429
		l9.473,19.298C23.919,21.038,24,21.384,24,21.731c0,0.607-0.237,1.178-0.667,1.606c-0.428,0.428-0.998,0.664-1.604,0.664H2.272z
		 M11.997,1.501c-0.161,0-0.318,0.036-0.463,0.108c-0.208,0.102-0.38,0.274-0.482,0.482L1.579,21.39
		c-0.188,0.382-0.03,0.845,0.352,1.032c0.105,0.052,0.222,0.079,0.339,0.079h19.458c0.207,0,0.4-0.08,0.546-0.225
		c0.146-0.146,0.226-0.339,0.227-0.545c0-0.118-0.027-0.235-0.079-0.34L12.947,2.091C12.771,1.733,12.399,1.501,11.997,1.501z"/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat." theme="warn"]
            

Maintenance

  • Message de service concernant l’ensemble du site
  • Habituellement placé au dessus du titre principal, sous le fil d’Ariane
  • Icône par défaut : clé

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.

<div class="bocss-notice bocss-notice--maintenance">
    
    <div id="bocss-icon-wrench" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
    <g>
	<path d="M3.347,23.883c-0.864,0-1.676-0.336-2.286-0.946c-1.26-1.26-1.26-3.311,0-4.572l10.02-10.016
		c-0.45-1.622-0.251-3.381,0.557-4.861c0.833-1.524,2.209-2.633,3.875-3.122c0.602-0.176,1.221-0.266,1.84-0.266
		c1.077,0,2.152,0.276,3.108,0.799c0.207,0.113,0.35,0.319,0.383,0.552c0.033,0.232-0.046,0.47-0.212,0.636l-3.096,3.097v1.277
		h1.278c0,0,3.109-3.108,3.116-3.114c0.122-0.123,0.315-0.203,0.513-0.203c0.036,0,0.071,0.003,0.107,0.008
		c0.232,0.033,0.438,0.177,0.551,0.383c0.892,1.633,1.042,3.573,0.41,5.323c-0.927,2.569-3.388,4.296-6.122,4.296c0,0,0,0,0,0
		c-0.587,0-1.171-0.08-1.738-0.239L5.633,22.937C5.023,23.547,4.211,23.883,3.347,23.883z M17.352,1.6
		c-0.476,0-0.952,0.069-1.416,0.205c-1.282,0.376-2.341,1.229-2.981,2.402c-0.686,1.256-0.801,2.749-0.315,4.095
		c0.098,0.272,0.029,0.581-0.175,0.785L2.121,19.426c-0.675,0.676-0.675,1.775,0,2.451c0.327,0.327,0.762,0.507,1.225,0.507
		c0.464,0,0.899-0.18,1.225-0.507l10.34-10.344c0.142-0.142,0.33-0.219,0.531-0.219c0.086,0,0.172,0.015,0.253,0.044
		c0.547,0.198,1.117,0.297,1.693,0.297c2.104,0,3.997-1.328,4.71-3.305c0.367-1.018,0.394-2.113,0.085-3.137l-2.53,2.53
		c-0.14,0.14-0.333,0.22-0.53,0.22h-2.338c-0.414,0-0.75-0.336-0.75-0.75V4.874c0-0.2,0.078-0.389,0.22-0.53l2.53-2.531
		C18.321,1.671,17.841,1.6,17.352,1.6z"/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat." theme="maintenance"]
            

Lien

  • Lien vers de la documentation ou autre contenu
    • La composante est un lien en soi. Pour un effet optimal, inclure seulement un appel à l’action et utiliser un verbe d’action clair
  • Placé n’importe où dans le contenu
  • Icône par défaut : toucher du doigt


<div class="bocss-notice bocss-notice--link">
    
    <div id="bocss-icon-touch-finger" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
    <g>
	<path d="M9.477,23.997c-0.234,0-0.458-0.112-0.599-0.3l-3.85-5.132c-0.579-0.773-0.608-1.833-0.073-2.636
		c0.339-0.508,0.855-0.853,1.454-0.972c0.148-0.03,0.3-0.045,0.451-0.045c0.449,0,0.886,0.133,1.264,0.385
		c0.035,0.023,0.069,0.047,0.102,0.073l0.498,0.375V7.5c0-1.241,1.009-2.25,2.25-2.25s2.25,1.009,2.25,2.25v5.399l3.587,0.798
		c1.835,0.407,3.091,2.127,2.921,4l-0.511,5.622C19.184,23.707,18.863,24,18.473,24L9.477,23.997z M17.788,22.5l0.449-4.94
		c0.102-1.124-0.651-2.155-1.752-2.4l-4.174-0.928c-0.346-0.077-0.587-0.378-0.587-0.732v-6c0-0.414-0.336-0.75-0.75-0.75
		s-0.75,0.336-0.75,0.75v9.747c0,0.286-0.159,0.543-0.415,0.671c-0.103,0.052-0.219,0.079-0.335,0.079
		c-0.161,0-0.322-0.053-0.451-0.15l-1.7-1.278l-0.036-0.025c-0.128-0.085-0.277-0.131-0.43-0.131c-0.052,0-0.104,0.005-0.155,0.016
		c-0.206,0.041-0.384,0.159-0.5,0.333c-0.183,0.275-0.173,0.639,0.026,0.904l3.625,4.832L17.788,22.5z"/>
        <path d="M10.977,3.747c-0.414,0-0.75-0.336-0.75-0.75v-2.25c0-0.414,0.336-0.75,0.75-0.75s0.75,0.336,0.75,0.75v2.25
		C11.727,3.411,11.39,3.747,10.977,3.747z"/>
        <path d="M13.977,4.497c-0.2,0-0.389-0.078-0.53-0.22c-0.142-0.141-0.22-0.33-0.22-0.53s0.078-0.389,0.22-0.53l1.5-1.5
		c0.142-0.142,0.33-0.22,0.53-0.22s0.389,0.078,0.53,0.22c0.142,0.141,0.22,0.33,0.22,0.53s-0.078,0.389-0.22,0.53l-1.5,1.5
		C14.366,4.419,14.177,4.497,13.977,4.497z"/>
        <path d="M7.977,4.497c-0.2,0-0.389-0.078-0.53-0.22l-1.5-1.5c-0.142-0.141-0.22-0.33-0.22-0.53s0.078-0.389,0.22-0.53
		c0.141-0.142,0.33-0.22,0.53-0.22s0.389,0.078,0.53,0.22l1.5,1.5c0.142,0.141,0.22,0.33,0.22,0.53s-0.078,0.389-0.22,0.53
		C8.366,4.419,8.177,4.497,7.977,4.497z"/>
        <path d="M14.727,6.747c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h2.25c0.414,0,0.75,0.336,0.75,0.75
		s-0.336,0.75-0.75,0.75H14.727z"/>
        <path d="M4.977,6.747c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h2.25c0.414,0,0.75,0.336,0.75,0.75
		s-0.336,0.75-0.75,0.75H4.977z"/>
</g>
</svg>

    </div>

    <div class="bocss-notice__content bocss-notice__content--has-icon">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat.
    </div>
</div>

Code simplifié


                [Notice message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non metus sapien. Donec auctor finibus metus. Nam sollicitudin pellentesque feugiat." theme="link"]
            

Paramètres

Paramètre Valeurs Description
message définie par l’utilisateur Texte du message à afficher
title définie par l’utilisateur Ajout d’un titre formaté au-dessus du message
theme success, aside, info, error, warn, maintenance, link Styles de la note (principalement les couleurs)
icon définie par l’utilisateur Pour insérer une icône à gauche dans l’encadré de la note. Si aucune icône requise, laisser vide.
icon_override définie par l’utilisateur Pour remplacer l’icône par défaut par une autre.
link définie par l’utilisateur ID de la page ou de la publication vers laquelle renvoyer, s’il y a lieu. S’applique seulement à la note Lien.