A component to display an illustrated message with slots for an image, title, subtitle and actions.
Usually it's used to display a message with a call to action in lists where there are no items.
<Ui.IllustratedMessage subtitle=<{ "Give a little love!" }> size={Ui.Size.Px(16)} title=<{ "Hearth!" }> image={<Ui.Image src={@asset(../../assets/images/app-weight-tracker.jpg)} height={Ui.Size.Em(7)} width={Ui.Size.Em(10)} />} actions=<> <Ui.Button iconBefore={Ui.Icons.HEART} label="Give Love!" type="danger"/> <Ui.Button iconBefore={Ui.Icons.HEART_OUTLINE} label="More love!" type="secondary" /> </>/>
<> <Ui.IllustratedMessage image={<Ui.Icon size={Ui.Size.Em(6)} icon={Ui.Icons.BUG}/>} actions=<><Ui.Button label="Action"/></> subtitle=<>"Subtitle"</> size={Ui.Size.Px(12)} title=<>"Title"</> /> <Ui.IllustratedMessage image={<Ui.Icon size={Ui.Size.Em(6)} icon={Ui.Icons.BUG}/>} actions=<><Ui.Button label="Action"/></> subtitle=<>"Subtitle"</> size={Ui.Size.Px(16)} title=<>"Title"</> /> <Ui.IllustratedMessage image={<Ui.Icon size={Ui.Size.Em(6)} icon={Ui.Icons.BUG}/>} actions=<><Ui.Button label="Action"/></> subtitle=<>"Subtitle"</> size={Ui.Size.Px(20)} title=<>"Title"</> /></>
<> <Ui.IllustratedMessage image={<Ui.Icon icon={Ui.Icons.BUG}/>} title=<>"Title"</> /> <Ui.IllustratedMessage title=<>"Title"</> image={ <Ui.Image src={@asset(../../assets/images/app-contacts.jpg)} height={Ui.Size.Px(150)} width={Ui.Size.Px(200)} /> } /> <Ui.IllustratedMessage image={<Ui.Button label="I am a button!"/>} title=<>"Title"</> /></>
Mint UI is a design system and component library for building websites, web and desktop applications.