Composite blocks are pre-built structures made from multiple basic elements — things like icons, headings, paragraphs, and buttons — grouped and synced together so they work as one single unit.
They’re great for building faster and keeping your layouts consistent. Instead of setting up containers and aligning everything manually, you can just drop a composite block into your design and start customizing it right away.
You’ll find several types of composite blocks inside UiCore Blocks — from lists and grids to icon cards, testimonials, and galleries.
Navigating Sub-Blocks
Inside an Composite Block, each part of the structure is treated as a sub-block, making it easy to manage your layouts.
You can navigate these in two ways:
By clicking them – click any element in your composite block that you want to edit (the icon, the heading, the text) and it’ll open in the settings sidebar
By Breadcrumb Trail – appears at the top of the settings panel and in the toolbar, showing your current position in the hierarchy.
Examples of composite blocks
Icon Card / Icon Card Grid / Icon Card Carousel
The Icon Card block is the foundation of this group — it’s the base layout that powers both the Grid and Carousel versions.
All three share the same structure and styling logic, so once you understand how the Icon Card works, you’ll know how to use the others too.
Each Icon Card is made up of multiple elements — typically an icon, heading, paragraph, button and sometimes a badge — grouped together to form a clean, reusable component.
Layouts and Structure
Depending on which layout you select, elements are automatically wrapped and synchronized in different ways:
- Layout 1: All elements ungrouped.
- Layout 2: The icon is grouped together with the title.
- Layout 3: The title, paragraph, and button are grouped together.
This gives you a variety of layout combinations without needing to rebuild or reposition anything manually:
Synchronized Styling
While you can change the text or icon individually on each card, the visual styling — such as color, border, and spacing — remains synchronized across the entire block.
That means you only need to adjust a setting once, and all cards update automatically to stay consistent:
Managing Items
You can add, duplicate, or reorder items directly from the settings panel. For an even faster workflow, use the toolbar at the top — just click the plus [+] icon to insert a new item right away.
This makes it easy to scale your layout from a single card to a full responsive grid or carousel in seconds:
You also have full control over which parts are visible.
For example, you can show or hide the text, the button or the badge — and that change applies instantly across the entire grid or carousel.
These are just a few examples — there are many other composite blocks available, all working in a similar way. Each combines multiple elements into a ready-made structure that you can easily customize while keeping everything perfectly aligned and consistent.
Note: If you want to take customization even further, explore the Advanced Blocks.
They give you total editing control — allowing you to fully desynchronize, rearrange, or modify every individual element inside a block.
