Modelling Different Types of Pages with Bloqs

Bloqs allows you to declaratively model all kinds of pages in your application by combining standard UI components. Pages are not limited to lists or forms — you can design card overviews, detail views, or custom layouts depending on your needs.

At the core, every page is declared with a Page object, and its layout is defined by an area that can contain any combination of Bloqs UI components.

---

1. Example: Activity Cards Page

Below is an example of a cards-based page that uses CardComponent together with other UI elements like HtmlComponent and ButtonComponent.

var items = new List<GridItem>
{
    new()
    {
        Size = 4,
        Component = new CardComponent
        {
            ImageUri = "https://picsum.photos/1000?1",
            ImageHeight = 300,
            Area = PageBuilderExtensions.VerticalContainer(
                PageBuilderExtensions.Html("Stay on Track."),
                PageBuilderExtensions.BuildButton(
                    "Show notification",
                    "fa-solid fa-bell",
                    AppConstants.LogicBlocks.ShowNotification
                )
            ),
        },
    },
    new()
    {
        Size = 4,
        Component = new CardComponent
        {
            ImageUri = "https://picsum.photos/1000?2",
            ImageHeight = 300,
            Area = PageBuilderExtensions.VerticalContainer(
                PageBuilderExtensions.Html("Get It Done."),
                PageBuilderExtensions.BuildButton(
                    "Hello World",
                    "fa-solid fa-terminal",
                    AppConstants.LogicBlocks.HelloWorld
                )
            ),
        },
    },
    new()
    {
        Size = 4,
        Component = new CardComponent
        {
            ImageUri = "https://picsum.photos/1000?3",
            ImageHeight = 300,
            Area = PageBuilderExtensions.VerticalContainer(
                PageBuilderExtensions.Html("Let's Tackle This!"),
                PageBuilderExtensions.BuildButton(
                    "Show notification",
                    "fa-solid fa-bell",
                    AppConstants.LogicBlocks.ShowNotification
                )
            ),
        },
    },
};

appBuilder.AddPage(
    new Page
    {
        Id = AppConstants.Pages.CardsPage,
        Title = "Activity Cards",
        Name = "cards",
        Area = ContainerComponent.Create(new GridComponent { Items = items }),
    }
);

---

2. Key Elements Explained

CardComponent

• Displays content inside a styled card, optionally with an image.

• Area: Defines what goes inside the card (text, buttons, or even nested layouts).

• ImageUri: Sets the card’s header image.

• ImageHeight: Controls the image height.

---

HtmlComponent

• Used for showing static text or HTML content.

• Great for headers, captions, or motivational text.

---

ButtonComponent

• Adds interactive actions to your page.

• Label: The button text.

• Icon: Optional icon (e.g., using Font Awesome classes).

• ButtonLogic: Defines which logic block runs when the button is clicked.

---

GridComponent

• Provides the layout system for arranging components.

• Each GridItem specifies a component and its size within the grid.

---

3. Beyond Lists and Forms

This example shows how you can go beyond data-centric views like lists or forms, and instead model more interactive pages, such as:

• Card-based overviews

• Landing pages with images and buttons

• Mixes of static and interactive UI elements

By combining components like CardComponent, HtmlComponent, ButtonComponent, and GridComponent, you can design rich, flexible user experiences directly in your app model.

---

Key Points

1. A Page can contain any combination of Bloqs UI components.

2. Use GridComponent to structure your layout.

3. Combine cards, text, buttons, and logic to create interactive pages.