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

Light Mode Image

Text Formatting

Light Mode Image

Typographic Styles

Light Mode Image

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

Light Mode Image

Anatomy

Light Mode Image

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

Light Mode Image

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.
Light Mode Image

Anatomy

Light Mode Image

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

Light Mode Image

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

Light Mode Image

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

Light Mode Image

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

Light Mode Image

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.
Light Mode Image

Anatomy

Light Mode Image

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

Light Mode Image

Anatomy

Light Mode Image

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.”