Notice

Notice | Default

By default upsell notice doesn't have any spacing. Instead, it takes it from the parent element as in this example it takes it from sui-box-body.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

Try Pro Free for 30 Days

Notice | Modified

In case you need to add spacing to the element you must rely on modifiers listed on Utilities page.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

Try Pro Free for 30 Days

Documentation

Markup

Find the markup of the demo notice shown on the "preview" tab.

<div class="sui-upsell-notice">

	<div class="sui-upsell-notice__image" aria-hidden="true">
		<img
			class="sui-image sui-upsell-image"
			src="image-url.png"
			srcset="image-url.png 1x, image-url@2x.png 2x"
			alt="Hummingbird Upsell Image"
		/>
	</div>

	<div class="sui-upsell-notice__content">

		<div class="sui-notice sui-notice-purple">

			<div class="sui-notice-content">

				<div class="sui-notice-message">

					<span class="sui-notice-icon sui-icon-info sui-md" aria-hidden="true"></span>

					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

					<p><a class="sui-button sui-button-purple">Try Pro Free for 30 Days</a></p>

				</div>

			</div>

		</div>

	</div>

</div>