Need some inspiration of how to layout

General
1

Hi,

i would love to have some inspiration of how you would build the following. I dont to to say how i have done it currently, so would love to get a independent idea.

It must be responsive. I think to much complicated, thats why i would love to get some other point of view

image
image3094Ă—213 53.8 KB

1 Like
2

From a HTML point of view this is a DIV with two DIVs inside and can be done with a CSS Flexbox Responsive

1 Like
3

For the content of the cards, I’d use description list:
https://v-herd.eu/jonte-vaadinplus/key-value-pairs

Might want to use h1-h6 for the card titles.

2 Likes
4

Sounds good, Divs with CSS added to it or which way would you do it in Vaadin?

5

Use the Div class and set a class name that you then define in CSS.

To make it more readable you could create a Class Card that extends Div.

1 Like
6

Yes, and for CSS you can use LumoUtility like here

7

Ah okay, so step by step i get into it. Now i have added a formlayout to the card, so the content breaks on small screens.

I think there are better ways to do this, the gap between key and value is to big. I have checked the demo but looks quite complicated to get this result

vaadinplus/src/main/java/com/example/application/components/KeyValuePairs.java at main · anezthes/vaadinplus

I cloud also use a horizonal in a vertical layout but then the gap between each “line” would be different, is there a kind of tapstop which i could use in order to handle this?

image
image1030Ă—416 15.4 KB

Edit: Form Layout | Components | Vaadin Docs

Thats should be what i need

8

You can set the key width (on KeyValuePairs):

You can also set the gap between the key and the value (on KeyValuePair):

1 Like