> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Display Information
> Use these components to present static content, visual structure, and supporting context in your UI.
**Includes:** `TextContent`, `Img`, `TagBlock`, `ListBlock`, `Table`, `Card`, `Accordion`, `Steps`, `Carousel`, `CodeBlock`
## Text Content
**Definition**\
Text Content is a component that displays written information as formatted text using markdown syntax.
**Uses**\
**-** Ensures consistent styling of long-form content throughout the product.\
**-** Safely format and structure text while preventing layout-breaking or inaccessible content.
### Visual Variants
### Text Formatting
### Typographic Styles
### Customize with Prompts
* **Markdown Features:** Ask C1 to format text with bold, italics, links, strikethroughs, blockquotes, headers, lists, and checklists.
> Ex. *"Create a help article with headings, bullet points, and bolded keywords"*
* **Specialized Content:** Present information as tables, include code blocks with syntax highlighting, or render math equations.
> Ex. *"Show a markdown table comparing feature availability in Free vs. Pro plans"*
* **Visual Variants:** Specify the variant style C1 should apply for emphasis or context.
> Ex. *"Render the introduction using the 'clear' variant and FAQs using the 'card' variant"*
***
## Callout
**Definition**\
Callouts are specialized UI components designed to highlight important information by visually separating it from regular text content.
**Uses**\
**-** Draw attention to critical information, warnings, system status, and announcements.\
**-** Emphasize tips, best practices, or important takeaways.\
**-** Provide positive feedback for completed actions, milestones, or achievements.\
**-** Make key information concise and visually distinct.
### Variants
### Anatomy
### Customize with Prompts
* **Variant Selection:** Pick styles such as info, success, warning, or error.
> Ex. *"Show a warning callout for password strength issues"*
* **Title and Description:** Customize tone, length, and inclusion of emojis.
> Ex. *"Create a success callout titled '🎉 Well Done!' with a message about completing onboarding."*
* **Placement and Audience:** Modify where and when a callout appears.
> Ex. *"Display a tip callout at the top of the settings page."*
***
## Images
**Definition**\
The Image component displays a single image with proper formatting, accessibility, and responsive behavior.
**Uses**\
**-** Enhance understanding of complex topics with visual aids.\
**-** Add variety and break up large blocks of text to keep users engaged.
### Aspect Ratios
### Customize with Prompts
* **Source and Alt Text:** Specify image URLs and accessible descriptions.
> Ex. *"Add an image of a solar panel with alt text 'Residential rooftop solar installation'"*
* **Sizing and Cropping:** Choose what aspect ratio to use.
> Ex. *"Display the product image in a 1:1 square ratio"*
***
## Tags
**Definition**\
Tags are short, descriptive labels used to categorize content or highlight attributes.
**Uses**\
**-** Help users find relevant items by category or keyword.\
**-** Provide quick at-a-glance context.
### Anatomy
### Customize with Prompts
* **Label Content:** Specify tag text and icon use.
> Ex. *"Tag article with 'Beginner' and include an appropriate emoji."*
* **Grouping:** Use multiple tags to create meaningful clusters.
> Ex. *"Add tags to each section for price range, one unique feature and rating."*
***
## Lists
**Definition**\
A list is an ordered or unordered collection of related items displayed as static text.
**Uses**\
**-** Break long content into scannable sections.\
**-** Show relationships between points with nesting.
### Styles
### Customize with Prompts
* **List Type:** Choose between numbered, bulleted, or checklist styles.
> Ex. *"Show an ordered list of onboarding steps."*
* **Nesting:** Add hierarchy for complex content.
> Ex. *"Create a bullet list with sub-points under each main idea"*
***
## List Blocks
**Definition**\
List Blocks are visually rich lists where each item can be clicked to view more details.
**Uses**\
**-** Showcase features, products, or directory items.\
**-** Provide scannable previews with an action path.
### Anatomy
### Customize with Prompts
* **Item Elements:** Specify inclusion of images, subheaders and icons.
> Ex. *"Create a list block of courses with thumbnails, course titles, and expertise level."*
* **Item Content:** Customize the content in each list block, and specify the number of list items a block should have. Ask C1 for brief or descriptive text.
> Ex. *"Include 10 products in the list block and add descriptive text for each."*
***
## Tables
**Definition**\
Displays structured data in rows and columns for easy comparison and scanning.
**Uses**\
**-** Compare attributes across multiple items.\
**-** Provide summaries or structured recaps.
### Anatomy
### Customize with Prompts
* **Table Structure:** Customize headers and total number of columns and rows.
> Ex. *"Table comparing Basic, Pro, and Enterprise plans with 4 features listed in rows."*
* **Content Type:** Customize the type (tags, text, numbers, icons, emojis) of content each cell in a column should have.
> Ex. *"Use tag blocks for status indicators."*
***
## Accordions
**Definition**\
Accordions are vertically stacked, expandable sections that reveal hidden content when expanded.
**Uses**\
**-** Organize related content in a progressive disclosure format.\
**-** Reduce visual clutter while still providing access to detailed information.
### Anatomy
### Customize with Prompts
* **Section Titles and Order:** Specify number of sections, their sequence and edit trigger text content.
> Ex. **"Rename all section triggers to be more descriptive and catchy."**
* **Content:** Customize content types included in an accordion.
> Ex. *"Don't include charts in accordions."*
***
## Steps
**Definition**\
Display a sequence of numbered stages or actions in a linear flow to guide users through a multi-step process.
**Uses**\
**-** Provide clear sequential guidance for processes like onboarding, checkout, or tutorials.\
**-** Break complex tasks into manageable actions and help users anticipate what comes next.
### Anatomy
### Customize with Prompts
* **Structure:** Specify how many steps the task should be divided into and edit the sequence if necessary.
> Ex. *"Show how to sign up in 3 steps."*
* **Content:** Customize the title for each step, and the content in each step.
> Ex. *"Change the first step's title to "Download Software" and update its content to include system requirements"*
***
## Code Blocks
**Definition**\
Display monospaced, formatted code with syntax highlighting.
**Uses**\
**-** Present examples for developers to copy and reuse.\
**-** Showcase syntax for tutorials or documentation.
### Customize with Prompts
* **Language and Highlighting:** Define the programming language for syntax color-coding.
> Ex. *"Show a JavaScript function to calculate factorial"*
***
### Tabs
**Definition**\
A horizontal list of controls that organizes content into sections users can toggle between without leaving the current page, where only one section is visible at a time.
**Uses**\
**-** Reduce vertical scrolling by layering content instead of displaying sections one below another.\
**-** Let users choose what sections of content to engage with, when the sections are distinct and may not all be relevant to the user.
### Variants
### Anatomy
### Customize With Prompts
* Tab Labels and Icons: Customize the text label and inclusion of icons.
> Ex. *"Add icons to all the tabs."*
* Content Type: Tell C1 which components must be included in tabs and how it should be laid out.
> Ex. *"Put today's specials at the top of each tab and include images."*
* \*\*Number and Sequence of Tabs: \*\*Customize the sequence and number of tabs that the content should be organized into. Tabs are horizontally scrollable.
> Ex. *"Move the Drinks tab between Main Course and Desserts. Add a tab for Specials."*
***