A layout for websites, with slots for:
notification
- Content for notifications like alerts.header
- The header of the site usually with a logo and navigation.breadcrumbs
- Breadcrumb navigation so the user can track where they are.content
- The content for the page.footer
- The footer of the website.Infos content
<Ui.Layout.Website notification=<>"Notification slot..."</> header={ <Ui.Header brand={<Ui.Icon size={Ui.Size.Em(1.2)} icon={Ui.Icons.BEAKER}/>} items=[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/") ] /> } breadcrumbs={ <Ui.Breadcrumbs items=[ {"/", <>"Home"</>}, {"/components", <>"Components"</>}, {"", <>"Ui.Breadcrumbs"</>} ] /> } content={ <Ui.Box title=<>"Content"</>> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " \ "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim " \ "ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " \ "aliquip ex ea commodo consequat. Duis aute irure dolor in " \ "reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla " \ "pariatur. Excepteur sint occaecat cupidatat non proident, sunt in " \ "culpa qui officia deserunt mollit anim id est laborum." </Ui.Box> } footer={ <Ui.Footer infos={<p>"Infos content"</p>} navitems=[ { "Site", [ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/"), Ui.NavItem.Link( iconBefore: Ui.Icons.PUZZLE, iconAfter: <></>, href: "/components", label: "Components", target: "") ] }, { "Social", [ Ui.NavItem.Link( iconBefore: @svg(../../assets/svgs/discord-icon.svg), iconAfter: <></>, href: "https://discord.gg/NXFUJs2", target: "_blank", label: "Discord"), Ui.NavItem.Link( iconBefore: @svg(../../assets/svgs/twitter-icon.svg), iconAfter: <></>, href: "https://twitter.com/mint_lang", target: "_blank", label: "Twitter") ] } ] /> }/>
Mint UI is a design system and component library for building websites, web and desktop applications.