Notice

Use a notice to highlight an action, result or message. For quick reference, see technical parameters.

Example

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>

Shortcode


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

Success

  • Indicates the successful completion of an action or form.
  • Appears under the completed action, or in place of the form itself, once the action is successful.
  • By default, uses the circle-check icon.

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>

Shortcode


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

Aside

  • Highlights a helpful piece of supplementary information, such as a next step or best practice.
    • For best results, include only one idea per notice.
  • Is typically positioned within (or after) the main body of content.
  • By default, uses the bulb icon.

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>

Shortcode


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

Info

  • Delivers a temporary message that’s specific to the page.
  • Is typically positioned below the main title or between the lead and body of content.
  • By default, uses the paper-edit icon.

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>

Shortcode


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

Error

  • Indicates the unsuccessful completion of an action within a form.
  • Is typically positioned under the unsuccessful action.
  • By default, uses the circle-x icon.

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>

Shortcode


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

Warn

  • Prompts the user to pause and read before proceeding.
    • For best results, include only one idea per notice.
  • Is typically positioned after the lead or within the main body of content.
  • By default, uses the alert-triangle icon.

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>

Shortcode


                [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

  • Delivers a site-wide service message.
  • Is typically positioned above the main title, below the breadcrumbs.
  • By default, uses the wrench icon.

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>

Shortcode


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

Link

  • Points to supporting documentation or additional content.
    • The entire notice component is a link. For best results, include only one call to action; use a clear call-to-action verb.
  • Can be positioned anywhere within the main body of content.
  • By default, uses the touch-finger icon.


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

Shortcode


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

Parameters

Parameter Values Description
message user-specified Message to display
title user-specified Adds a stylized title above the message text
theme success, aside, info, error, warn, maintenance, link Notice style, mainly its colour
icon user-specified Icon displayed on the left side of the notice box. Leave blank for no icon.
icon_override user-specified Replace the default icon with another.
link user-specified Page or post ID to link to, if desired. Applies only to the link notice.