The «Multi-Component Flex Box» snippet illustrates how to use the <Exhibit> block to show
a number of small, closely related elements. The elements are centered in a flex container.
import { Exhibit } from "timvir/blocks";
<Exhibit
BackdropProps={{
style: {
padding: 20,
display: "flex",
flexWrap: "wrap",
justifyContent: "center",
gap: 20,
},
}}
>
<div style={{ background: "#f0f8", height: 32, width: 120 }} />
<div style={{ background: "#f0f8", height: 32, width: 80 }} />
<div style={{ background: "#f0f8", height: 32, width: 90 }} />
<div style={{ background: "#f0f8", height: 32, width: 160 }} />
<div style={{ background: "#f0f8", height: 32, width: 90 }} />
<div style={{ background: "#f0f8", height: 32, width: 100 }} />
<div style={{ background: "#f0f8", height: 32, width: 140 }} />
<div style={{ background: "#f0f8", height: 32, width: 100 }} />
</Exhibit>