Use these components to present static content, visual structure, and supporting context in your UI.
TextContent
, Img
, TagBlock
, ListBlock
, Table
, Card
, Accordion
, Steps
, Carousel
, CodeBlock
Ex. “Create a help article with headings, bullet points, and bolded keywords”
Ex. “Show a markdown table comparing feature availability in Free vs. Pro plans”
Ex. “Render the introduction using the ‘clear’ variant and FAQs using the ‘card’ variant”
Ex. “Show a warning callout for password strength issues”
Ex. “Create a success callout titled ’🎉 Well Done!’ with a message about completing onboarding.”
Ex. “Display a tip callout at the top of the settings page.”
Ex. “Add an image of a solar panel with alt text ‘Residential rooftop solar installation’”
Ex. “Display the product image in a 1:1 square ratio”
Ex. “Tag article with ‘Beginner’ and include an appropriate emoji.”
Ex. “Add tags to each section for price range, one unique feature and rating.”
Ex. “Show an ordered list of onboarding steps.”
Ex. “Create a bullet list with sub-points under each main idea”
Ex. “Create a list block of courses with thumbnails, course titles, and expertise level.”
Ex. “Include 10 products in the list block and add descriptive text for each.”
Ex. “Table comparing Basic, Pro, and Enterprise plans with 4 features listed in rows.”
Ex. “Use tag blocks for status indicators.”
Ex. “Rename all section triggers to be more descriptive and catchy.”
Ex. “Don’t include charts in accordions.”
Ex. “Show how to sign up in 3 steps.”
Ex. “Change the first step’s title to “Download Software” and update its content to include system requirements”
Ex. “Show a JavaScript function to calculate factorial”
Ex. “Add icons to all the tabs.”
Ex. “Put today’s specials at the top of each tab and include images.”
Ex. “Move the Drinks tab between Main Course and Desserts. Add a tab for Specials.”