Webflow-Examples · KirklandGee · Mar 5, 2026
diff --git a/accordion/README.md b/accordion/README.md
@@ -0,0 +1,92 @@
+# Accordion
+A fully accessible accordion component that displays collapsible content sections with smooth slide animations.
+
+## Getting Started
+
+Install dependencies:
+```bash
+npm install
+```
+
+Share the component to your Webflow workspace:
+```bash
+npx webflow library share
+```
+
+For local development:
+```bash
+npm run dev
+```
+
+## Designer Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| ID | Id | — | HTML ID attribute for targeting and accessibility |
+| Variant | Variant | bordered | Visual style of the accordion (bordered or flush) |
+| Expansion Mode | Variant | single | Controls whether multiple sections can be open at once (single or multiple) |
+| Item 1 Visible | Visibility | — | Show or hide the first accordion item |
+| Item 1 Title | Text | What is your return policy? | Header title for the first accordion item |
+| Item 1 Content | RichText | We offer a 30-day money-back guarantee... | Body content for the first accordion item |
+| Item 2 Visible | Visibility | — | Show or hide the second accordion item |
+| Item 2 Title | Text | How long does shipping take? | Header title for the second accordion item |
+| Item 2 Content | RichText | Standard shipping typically takes... | Body content for the second accordion item |
+| Item 3 Visible | Visibility | — | Show or hide the third accordion item |
+| Item 3 Title | Text | Do you offer international shipping? | Header title for the third accordion item |
+| Item 3 Content | RichText | Yes, we ship to over 50 countries... | Body content for the third accordion item |
+| Item 4 Visible | Visibility | — | Show or hide the fourth accordion item |
+| Item 4 Title | Text | How can I track my order? | Header title for the fourth accordion item |
+| Item 4 Content | RichText | Once your order ships, you'll receive... | Body content for the fourth accordion item |
+| Item 5 Visible | Visibility | — | Show or hide the fifth accordion item |
+| Item 5 Title | Text | What payment methods do you accept? | Header title for the fifth accordion item |
+| Item 5 Content | RichText | We accept all major credit cards... | Body content for the fifth accordion item |
+
+## Styling
+
+This component automatically adapts to your Webflow site's design system through site variables and inherited properties.
+
+### Site Variables
+
+To match your site's design system, define these CSS variables in your Webflow project settings. The component will use the fallback values shown below until you configure them.
+
+| Site Variable | What It Controls | Fallback |
+|---------------|------------------|----------|
+| --background-primary | Accordion item background color | #ffffff |
+| --background-secondary | Button hover state background | #f5f5f5 |
+| --text-primary | Title and content text color | #1a1a1a |
+| --text-secondary | Muted text elements color | — |
+| --border-color | Item borders and dividers | #e5e5e5 |
+| --accent-color | Focus outline and link color | #1a1a1a |
+| --border-radius | Corner rounding for bordered variant | 8px |
+
+### Inherited Properties
+
+The component inherits these CSS properties from its parent element:
+- `font-family` — Typography style
+- `color` — Text color
+- `line-height` — Text spacing
+
+## Extending in Code
+
+### Custom Animation Duration
+Modify the slide animation speed by targeting the content wrapper:
+```css
+.wf-accordion-content {
+  transition: max-height 0.5s ease-in-out;
+}
+```
+
+### Adjust Item Spacing
+Control the padding around accordion items:
+```css
+.wf-accordion-button {
+  padding: 20px 24px;
+}
+.wf-accordion-body {
+  padding: 0 24px 24px 24px;
+}
+```
+
+## Dependencies
+
+No external dependencies.
diff --git a/accordion/index.html b/accordion/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Accordion</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; margin: 0; }
+      body { color: inherit; }
+      h1, h2, h3, h4, h5, h6 { color: inherit; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/accordion/metadata.json b/accordion/metadata.json
@@ -0,0 +1,5 @@
+{
+  "name": "Accordion",
+  "description": "Collapsible content sections with smooth animations. Supports single and multiple open modes, bordered and flush variants.",
+  "category": "Layout"
+}
diff --git a/accordion/package.json b/accordion/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "accordion",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "@webflow/data-types": "^1.0.1",
+    "@webflow/react": "^1.0.1",
+    "@webflow/webflow-cli": "^1.8.44",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7"
+  }
+}
diff --git a/accordion/screenshot-brand.png b/accordion/screenshot-brand.png
diff --git a/accordion/screenshot-dark.png b/accordion/screenshot-dark.png
diff --git a/accordion/screenshot-light.png b/accordion/screenshot-light.png
diff --git a/accordion/src/components/Accordion/Accordion.css b/accordion/src/components/Accordion/Accordion.css
@@ -0,0 +1,159 @@
+/*
+ * Webflow Site Variables Used:
+ * - --background-primary: Accordion background
+ * - --background-secondary: Button hover state
+ * - --text-primary: Title and content text
+ * - --text-secondary: Muted text elements
+ * - --border-color: Item borders and dividers
+ * - --accent-color: Focus outline color
+ * - --border-radius: Corner rounding for bordered variant
+ */
+
+/* Box sizing reset */
+.wf-accordion *,
+.wf-accordion *::before,
+.wf-accordion *::after {
+  box-sizing: border-box;
+}
+
+/* Root element - inherit Webflow typography + default padding */
+.wf-accordion {
+  font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  padding: 24px;
+}
+
+/* Bordered variant container */
+.wf-accordion-bordered {
+  border: 1px solid var(--border-color, #e5e5e5);
+  border-radius: var(--border-radius, 8px);
+  overflow: hidden;
+}
+
+/* Flush variant container */
+.wf-accordion-flush {
+  border: none;
+}
+
+/* Accordion item */
+.wf-accordion-item {
+  background: var(--background-primary, #ffffff);
+}
+
+/* Bordered variant item borders */
+.wf-accordion-bordered .wf-accordion-item + .wf-accordion-item {
+  border-top: 1px solid var(--border-color, #e5e5e5);
+}
+
+/* Flush variant item borders */
+.wf-accordion-flush .wf-accordion-item + .wf-accordion-item {
+  border-top: 1px solid var(--border-color, #e5e5e5);
+}
+
+/* Header wrapper */
+.wf-accordion-header {
+  margin: 0;
+  padding: 0;
+}
+
+/* Accordion button */
+.wf-accordion-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--text-primary, #1a1a1a);
+  font-size: 16px;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.wf-accordion-button:hover {
+  background: var(--background-secondary, #f5f5f5);
+}
+
+.wf-accordion-button:focus-visible {
+  outline: 2px solid var(--accent-color, #1a1a1a);
+  outline-offset: -2px;
+  z-index: 1;
+  position: relative;
+}
+
+.wf-accordion-button:active {
+  background: var(--background-secondary, #f5f5f5);
+}
+
+/* Title text */
+.wf-accordion-title {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Chevron icon */
+.wf-accordion-icon {
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
+  color: var(--text-primary, #1a1a1a);
+}
+
+.wf-accordion-icon-expanded {
+  transform: rotate(180deg);
+}
+
+/* Content wrapper with slide animation */
+.wf-accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+/* Content body */
+.wf-accordion-body {
+  padding: 0 20px 20px 20px;
+  color: var(--text-primary, #1a1a1a);
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+/* Rich text content styling */
+.wf-accordion-body p {
+  margin: 0 0 12px 0;
+}
+
+.wf-accordion-body p:last-child {
+  margin-bottom: 0;
+}
+
+.wf-accordion-body a {
+  color: var(--accent-color, #1a1a1a);
+  text-decoration: underline;
+}
+
+.wf-accordion-body a:hover {
+  text-decoration: none;
+}
+
+.wf-accordion-body ul,
+.wf-accordion-body ol {
+  margin: 0 0 12px 0;
+  padding-left: 24px;
+}
+
+.wf-accordion-body li {
+  margin-bottom: 4px;
+}
+
+.wf-accordion-body strong {
+  font-weight: 600;
+}
+
+.wf-accordion-body em {
+  font-style: italic;
+}