Layouts/Component Advice

Hi all, I’m making an application using Vaadin that will allow users to create detailed guides for League of Legends. One of my views is going to be allowing the creator of the guide to select runes. In League of Legends, the rune selection page in-game is divided like:

Primary Path:
Primary Path Keystone:
Primary Path Runes:
Primary Path Runes Slot 1:
Primary Path Runes Slot 2:
Primary Path Runes Slot 3:

Secondary Path:
Secondary Path Runes:
Primary Path Runes Slot 1:
Primary Path Runes Slot 2:
(you can only pick two runes for the secondary path)

Stat Mods:
Stat Mod Slot 1:
Stat Mod Slot 2:
Stat Mod Slot 3:

I’m wanting to create a view that matches this format, but I am unsure what layouts/components to use. I’ve attached an image of the rune selection screen in-game to visualise the layout I’ve described above.

The general rule is that the player can select one rune from each row, besides in the Secondary Path, where the player can select two runes in total from the available 3 rows (with only one rune from a particular row allowed)


Worth noting , I already have a class in place that retrieves all the static data I need for the view from the Riot API, I’m just unsure on the view itself.

Here is the image depicting the runes selection screen, with the Primary Path (red), Secondary Path (green) and Stat Mods (small runes in the bottom right) sections