Feature list with numbered items and AI chat card with citations
Two-column feature section for AI product and SaaS landing pages with a numbered feature list on the left and an AI chat preview card on the right showing cited responses. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A white two-column feature section. The left column holds a bold headline and three numbered feature items. Each item has a two-digit number in light grey, a bold feature name styled with an amber underline on the active item, and a one-line description in grey. The right column shows a frosted light grey chat card with a header label and two conversation turns: a user question in a blue right-aligned bubble, and an AI response in a white left-aligned bubble that includes a row of small citation pills below the answer text. The citation pills reference source documents from the knowledge base. This layout communicates knowledge-grounded AI answers without marketing language, which increases trust for enterprise and professional audiences. All styling is inline CSS with no JavaScript.
Common questions about this template
How do I change the active feature highlight?
Ask your vibe coding tool to move the .active class to a different h3 element inside .feature-item. The active style adds a blue colour and an amber bottom border. Only one h3 should carry the .active class at a time for the cleanest visual result.
How do I update the chat messages?
Ask Bolt, Claude Code, Replit, or Lovable to update the text inside the .msg-bubble divs. The user message is in the .msg-user bubble. The AI response is in the .msg-bot bubble. Update the citation pill labels inside .cite spans to match your actual source documents.
How do I add a third feature item?
Ask your vibe coding tool to add a new .feature-item div after the last existing one. Copy the structure of an existing item with a .feature-num span and a .feature-body div containing h3 and p. Update the number, title, and description.
Use this AI coding template for
- ·AI product landing pages where showing a real knowledge-grounded chat response communicates accuracy better than bullet points
- ·Enterprise SaaS feature sections where citation pills demonstrate that answers come from verified sources rather than a general model
- ·Customer support AI and internal knowledge base product pages that need a split layout contrasting capabilities with proof