And example how to creare a simple Card component using LumoUtility classes as well as how to layout those in the view using responsive CSS Grid with LumoUtiility classes in Vaadin 24

ResponsiveCardsView.java

package org.vaadin.tatu;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.HasComponents;
import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H4;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

@Route("cards")
public class ResponsiveCardsView extends Div {

    String contentString = """
            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."
            """;

    public ResponsiveCardsView() {
        var grid = new CardsGrid();
        for (int i = 1; i < 17; i++) {
            var card = new Card("Card " + i);
            var content = new Paragraph(contentString);
            card.add(content);
            grid.add(card);
        }
        addClassNames(LumoUtility.Margin.MEDIUM);
        add(grid);
    }

    public static class CardsGrid extends Div {
        public CardsGrid() {
            addClassNames(LumoUtility.Display.GRID, LumoUtility.Grid.FLOW_ROW,
                    LumoUtility.Grid.Column.COLUMNS_1,
                    LumoUtility.Grid.Breakpoint.Small.COLUMNS_2,
                    LumoUtility.Grid.Breakpoint.Large.COLUMNS_4,
                    LumoUtility.Gap.MEDIUM);
        }
    }

    public static class Card extends Composite<Div>
            implements HasComponents, HasSize {
        Div div = new Div();
        Div content = new Div();
        H4 title = new H4();
        String titleText;

        public Card(String titleText) {
            this.titleText = titleText;
        }

        @Override
        public Div initContent() {
            title.setText(titleText);
            title.addClassNames(LumoUtility.Background.CONTRAST_5,
                    LumoUtility.TextColor.PRIMARY, LumoUtility.Padding.SMALL,
                    LumoUtility.Border.BOTTOM,
                    LumoUtility.BorderColor.CONTRAST_10);
            div.addClassNames(LumoUtility.Display.FLEX,
                    LumoUtility.FlexDirection.COLUMN, LumoUtility.Border.ALL,
                    LumoUtility.BorderColor.CONTRAST_10,
                    LumoUtility.BorderRadius.SMALL,
                    LumoUtility.BoxShadow.SMALL);
            content.addClassNames(LumoUtility.Flex.GROW,
                    LumoUtility.Padding.SMALL);
            div.add(title, content);
            return div;
        }

        @Override
        public void add(Component... components) {
            content.add(components);
        }

        @Override
        public void remove(Component... components) {
            content.remove(components);
        }
    }
}