import zero_true as zt# First, define the image component to be placed inside the cardsample_image = zt.Image(id="Sample", height=200, src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg")# Now, define the card using the specified parameterssample_card = zt.Card( id="sample_card", childComponents=[sample_image.id], # List containing the ID of the image component color="lightblue", # You can specify any CSS color here component='v-card', # Vue component name for the card elevation=2, # Elevation level of the card (must be between 0 and 24) width=500 # Specify the width of the card)# Assuming you have a mechanism to render or use this card within a layoutlayout = zt.Layout(components=[sample_card])
pydantic model zero_true.CardThe Card component serves as a versatile container in user interfaces, designed to group related UI elements together.It offers customization options through various properties such as background color, elevation, and density, enabling designers to tailor its appearance and behavior to fit different contexts and layouts.
Each card can house multiple child components, each occupying its own row, which makes it an ideal choice for creating structured, yet visually appealing content displays.