Skip to main content

Home
Setup
Basics
- Heading
- Typography
- Colours
- Icons
- Layout
- Footer
- Utilities
Containers
Form Elements
- Form Field
- Labels
- Inputs
- Password
- Textarea
- Radios
- Checkbox
- Toggles
- Select
- File Uploads
- Image Uploads
- Insert Variables
- Calendar
- Buttons
- Icon Buttons
- WP Editor
- Multiple Strings
Simple Elements
- Notifications
- Tags
- Tooltips
- Status Dot
- Tables
- Scores
- Progress Bar
- Code Snippets
- Code Editor
- Dropdowns
- Field List
- Tree Selectors
- Pagination
- Recipient
- Colour Picker
Composite Elements
- Tabs
- Side Tabs
- Selectors
- Builder
- Accordions
- Side Navigation
- Modals
- Summary
Upsells

Menu
RTL Language
Monochrome

Version 2.12.24

Message Box

Sample
Documentation

This message box variation have larger margins and always contains: image, text and button(s). Notice we don't include a title here.

Documentation

<div class="sui-box sui-message sui-message-lg">

	<img
		src="/dist/image.png"
		srcset="/dist/image.png 1x, /dist/image@2x.png 2x"
		class="sui-image"
		aria-hidden="true"
	/>

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

		<p>Here goes message box content.</p>

		<!--
		NOTE:
		Always add button(s) inside paragraph tag.
		-->
		<p><button class="sui-button">Button</button></p>

	</div>

</div>