Organize the content in tiles of equal width.
The <Tiles> is a layout component which is based on CSS grid system.
<Tiles> serves as a versatile container, ideal for constructing panels, cards, lists, and other content components that organize and group information. They automatically wraps children to a new line if the space given is not enough to show the <Tiles> in one row.
It's possible to display the items with some spacing through space prop or set a minimum width for all items inside <Tiles> with tilesWidth prop.
Grand Avenue Ballroom
An elegant ballroom with crystal chandeliers and a full proscenium stage, ideal for gala dinners, award nights, and concerts.
Maple Court Theatre
A comfortable mid‑size theatre with raked seating and modern AV, designed for comedy, theatre, and lectures.
Broadway Community Center
A multipurpose community center with flexible rooms and a small auditorium for talks, classes, and local performances.
Hillcrest Open Pavilion
An open‑air pavilion with a covered stage and movable seating, set in a hillside park for fairs and seasonal shows.
Bloomfield Garden Lawn
A landscaped garden lawn with power access and tent options, great for large outdoor receptions and summer series.
Riverside Theatre
A modern theatre on the riverfront offering excellent acoustics and seating for cultural and entertainment events.
Downtown Conference Hall
A versatile conference facility in the heart of the city, ideal for corporate events and seminars.
Sunset Arena
A large open-air arena perfect for concerts and sports, offering panoramic views during sunset.
Grandview Stadium
A major stadium for sports and concerts, offering modern facilities and large-scale seating.
Greenfield Park Pavilion
An outdoor pavilion surrounded by nature, perfect for community gatherings and open-air performances.
City Arts Center
A hub for arts and culture with flexible event spaces for performances, exhibitions, and talks.
Highland Amphitheatre
An outdoor amphitheatre carved into the hillside, ideal for concerts under the stars.
Lakeside Pavilion
A lakeside venue with open-air charm, perfect for weddings, banquets, and concerts.
Northside Community Hall
A community hall offering flexible spaces for local events, gatherings, and small performances.
Heritage Hall
A restored historic hall, now hosting concerts, weddings, and special community events.
Eastside Sports Dome
A covered sports dome suitable for large-scale sporting events and exhibitions.
West End Club
A stylish lounge and club with live entertainment and a modern atmosphere.
Cedar Grove Pavilion
A rustic outdoor pavilion surrounded by cedar trees, popular for weddings and festivals.
Harbor View Hall
A formal hall with panoramic harbor views, ideal for gala dinners and concerts.
Silverstone Arena
A modern multipurpose stadium hosting sports and concerts with world-class facilities.
If you need to have the items in the <Tiles> take the same height, you can use the equalHeight property, which is a boolean value that can be used to size the items of the <Tiles>. In this case, all items adopt the size of the largest card, making it essential when you want all items to match the largest child’s dimensions.
Using the stretch property will make the tiles fully responsive. Meaning, they will distribute available width between them while not getting smaller then the given tilesWidth.
Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
aria-live?"off" | "polite" | "assertive";
Indicates the level of importance for updates in the live region.
- 'off': Updates are not announced unless focused.
- 'polite': Updates are announced when the user is idle.
- 'assertive': Updates are announced immediately, interrupting other announcements.
The children of the component.
If true, all items will have the height of the biggest item.
The element's unique identifier. See
MDN.
role?"region" | (string & {});
Identifies the element a significant section of content for easier navigation.
When
region is used as a role, an
aria-label or
aria-labelledby must be provided.
See
MDN.
The space between the children. You can see allowed tokens
here.
Tiles will stretch to available width and will distribute their width equally. Note that this can make them wider than the specified tiles width, but not smaller than the given "tilesWidth". Basically, this is full responsive mode.
Set minimum width for all items inside.
Columns: It should be noted that <Tiles> is used for children with the same width. If you want to set different widths for the children use <Columns> instead.
Grid: If you need more custom controll over the layout, you should use <Grid> component instead.
Last update: 4 months ago