Tailwind Svelte Assistant

# Basic Card - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `basic-card.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The component displays a basic card with an image, title, description, and a call-to-action. ## Overview This component creates a standard card layout, often used to present a summary of content with a link to more details. It's designed to be themeable and customizable through props. ## Original Svelte Component Props The original Svelte component defines the following props: - `imageUrl: string` (default: "https://via.placeholder.com/400x200") - URL for the card image. - `title: string` (default: "Card Title") - The title of the card. - `description: string` (default: "This is a brief description...") - A brief description. - `linkUrl: string` (default: "#") - The URL for the call-to-action. - `linkText: string` (default: "Learn More") - Text for the call-to-action. - `customClasses: string` (optional, default: "bg-theme-bg-base border-theme-border shadow-md") - Custom classes for the root `div`. - `imageClasses: string` (optional, default: "w-full h-48 object-cover") - Custom classes for the `<img>` tag. - `contentClasses: string` (optional, default: "p-5") - Custom classes for the content `div`. - `titleClasses: string` (optional, default: "mb-2 text-2xl font-bold tracking-tight text-theme-text-base") - Custom classes for the title `<h5>`. - `descriptionClasses: string` (optional, default: "mb-3 font-normal text-theme-text-muted") - Custom classes for the description `<p>`. - `buttonClasses: string` (optional, default: "inline-flex items-center ...") - Custom classes for the call-to-action `<a>` button. ## Theme Variables Noted in Original Snippet - `--theme-bg-base` - `--theme-border-color` - `--theme-border-radius-lg` - `--theme-text-base` - `--theme-text-muted` - `--theme-color-primary` - `--theme-color-primary-hover` - `--theme-text-on-primary` These are intended to be used with corresponding Tailwind utility classes like `bg-theme-bg-base`, `text-theme-primary`, etc., assuming these CSS variables are defined in a global stylesheet. ## HTML Structure Example (Conceptual) This static HTML represents the structure generated by the Svelte component using its default prop values for content and the default class strings. ```html <div class="max-w-sm rounded-lg border overflow-hidden bg-white border-gray-200 shadow-md"> <!-- Applied: customClasses default (approximated with direct Tailwind) --> <!-- Original Svelte: class="max-w-sm rounded-theme-lg border overflow-hidden {customClasses}" --> <a href="#" aria-label="Card Title"> <img class="rounded-t-lg w-full h-48 object-cover" src="https://via.placeholder.com/400x200" alt="Card Title" /> <!-- Applied: imageClasses default --> <!-- Original Svelte: class="rounded-t-theme-lg {imageClasses}" --> </a> <div class="p-5"> <!-- Applied: contentClasses default --> <a href="#"> <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Card Title</h5> <!-- Applied: titleClasses default (approximated) --> <!-- Original Svelte: class="{titleClasses}" --> </a> <p class="mb-3 font-normal text-gray-700">This is a brief description of the card content. It can span multiple lines if needed.</p> <!-- Applied: descriptionClasses default (approximated) --> <!-- Original Svelte: class="{descriptionClasses}" --> <a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300/30 transition-colors" > <!-- Applied: buttonClasses default (approximated with direct Tailwind & example primary color) --> <!-- Original Svelte: class="{buttonClasses}" which includes theme variables --> Learn More <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </a> </div> </div> ``` ## JavaScript Notes - The Svelte component uses props to set the card's content (image, title, description, link) and to allow overriding default Tailwind classes for various parts of the card. - For static HTML, content and classes would be hardcoded. ## CSS Notes - The original Svelte component's `<style>` block is empty. - Styling heavily relies on Tailwind CSS utility classes. - The default class strings in the Svelte props use "theme variables" (e.g., `bg-theme-bg-base`, `text-theme-primary`). For these to work, the corresponding CSS custom properties (like `--theme-bg-base`) must be defined in a global stylesheet, and Tailwind must be configured to recognize these. The HTML example above approximates some of these with direct Tailwind classes (e.g., `bg-white`, `text-gray-900`, `bg-blue-700`) for a generic appearance if theme variables are not set up. This Markdown file provides an HTML structure and class details based on the `basic-card.svelte` snippet.