Extending V13 Backoffice with Custom dashboard using UUI Library

[round swan]

Hey all,

Looking to create just a simple welcome sort of dashboard to replace the default Umbraco one for clients. (Simple welcome message and a few links for getting in contact with myself, linking to some of my documentation e.t.c)

Was trying to leverage the https://uui.umbraco.com/ library and thought I'd go with a simple Box Layout as the heading of the Dashboard which looks fine, Then thought i'd use the "Card" component to act as the few quicklinks. However simply adding 4 "<uui-card-block-type>" elements of course renders them underneath eachother.

Is there a section Im missing on the Umbraco library on how Grid / Row / Column Layouts are achieved?

The https://uui.umbraco.com/?path=/story/design-style-guide--layout link describes the idea, but I was expecting some elements prebuilt to handle certain configurations or am I mistaken?

[drowsy jolt]

Hi there! My experience thus far is that layout is your own responsibility. I usually go by: "If it's not explicitly in the storybook, then I have to make it myself"

[narrow notch]

Maybe get some inspiration from The Dashboard by @versed forum :
https://marketplace.umbraco.com/package/our.umbraco.thedashboard

Source code: https://github.com/enkelmedia/TheDashboard

[versed forum]

If you want the elements to not render underneath each other - just put them in a wrapping div and use display:flex?

[round swan]

Thanks for the suggestion @narrow notch !

Indeed @versed forum I can do that, Was just expecting there to be some UI elements such as a (hypothetically speaking)
<uui-grid-container> with slots for say the <uui-card-block-type>

But I expected wrong 😅

But taking the advice of just handling layout myselfs all thats needed:

Looking perfectly fine for what I needed!