Live examples and demonstrations
The Responsive Slot Layout includes two accordion types: standard and classic. Both render in a single-column layout to ensure proper expand/collapse behavior. Standard accordions allow titles to be centered or left-aligned, while classic accordions support left, center, and right alignment. You can apply these alignments using the classes below, and optionally control behavior with data attributes such as data-single-open, data-alternate, and data-custom-colors.
Get up and running in 5 minutes with our Quick Start Guide!
View Quick Start GuideAccordions can be filtered dynamically using the FilterBus pub/sub system. Filter FAQ items by category, topic, or any data attribute!
See FilterBus Demo.rsl-center.rsl-left.rsl-right
data-single-open="true" — Only one panel open at a time within a group (FAQ-style behavior).data-alternate="true" — Enable alternating row colors for classic accordions.data-custom-colors="true" — Use your own CSS custom properties for alternate colors.
Each card expands independently. Responsive: 1 column on mobile, 2 on tablet, 3 on desktop.
RSL (Responsive Slot Layout) is a lightweight, accessible CSS framework for building responsive layouts with zero dependencies.
Simply include the CSS and JS files in your project. No build step required - just link the files and start using the components.
Yes! RSL is built with WCAG 2.1 AA compliance in mind. Full keyboard navigation and screen reader support included.
Absolutely! Use CSS variables to customize colors, spacing, and more. Override styles as needed for your brand.
Built-in dark mode support via the data-theme attribute. Toggle between light and dark themes effortlessly.
Yes! RSL is used in production by multiple organizations. No build process, human-readable source code.
Question Title
Answer content goes here.
This is example content for title example one.
This is example content for title example two.
This is example content for title example three.
Title Example 1
This is example content for title example one.
Title Example 2
This is example content for title example two.
Title Example 3
This is example content for title example three.
Styled accordions reuse the same RSL behavior you already have. The only difference is the shell—everything else is standard .accordion-title and .accordion-content.
Titles behave like real buttons with focus, roles, and state for assistive tech.
Just a container, an .accordion-title, and one .accordion-content per item.
Drop in cards, lists, or slot-layout grids without extra wrappers.
The fancy shell does not change how accordions behave—it simply layers design on top of your original logic.
Use this pattern anywhere you need a “real product” feel—pricing FAQs, product details, or onboarding checklists.
Layout system
Why RSL Accordions feel like real product UI
Styled accordions reuse the same RSL behavior you already have.
Semantic controls
Titles behave like real buttons with focus, roles, and state.
Readable markup
Just a title and a content panel per item.
Grid-ready body
Drop in cards, lists, or slot-layout grids.
/* Fancy accordion shell – visual only, behavior stays in accordion.js */
.fancy-accordion {
--surface:#0e1324;
--item:#0b1120;
--item-active:#111827;
--muted:#9ca3af;
--accent:#6E7BFF;
--ring:rgba(110,123,255,.4);
margin:2.5rem 0 3rem;
border-radius:18px;
background:
radial-gradient(900px 400px at 0% 0%, rgba(110,123,255,.18), transparent 55%),
radial-gradient(800px 500px at 100% 0%, rgba(56,189,248,.18), transparent 55%),
var(--surface);
box-shadow:0 22px 55px rgba(15,23,42,.85), inset 0 1px 0 rgba(255,255,255,.04);
border:1px solid rgba(148,163,184,.35);
color:#e5e7eb;
}
.fancy-accordion-inner {
padding:1.1rem 1.25rem 1.3rem;
display:flex;
flex-direction:column;
gap:.65rem;
}
.fancy-accordion .accordion-item {
border-radius:14px;
background:rgba(15,23,42,.7);
border:1px solid rgba(148,163,184,.35);
overflow:hidden;
}
/* Trigger / title */
.fancy-accordion .accordion-title {
width:100%;
display:flex;
align-items:flex-start;
gap:.75rem;
padding:.8rem 1rem;
background:transparent;
border:none;
color:inherit;
text-align:left;
cursor:pointer;
position:relative;
}
.fancy-accordion .accordion-title:focus-visible {
outline:none;
box-shadow:0 0 0 3px(var(--ring));
border-radius:inherit;
}
/* Icon pill */
.fancy-acc-icon-pill {
flex-shrink:0;
width:40px;
height:40px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(15,23,42,.9);
box-shadow:0 0 0 1px rgba(148,163,184,.4);
color:#c7d2fe;
}
/* Text stack */
.fancy-acc-text {
flex:1;
min-width:0;
}
.fancy-acc-kicker {
display:block;
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
margin-bottom:.1rem;
}
.fancy-acc-heading {
display:block;
font-size:1rem;
font-weight:600;
color:#f9fafb;
}
.fancy-acc-meta {
display:block;
margin-top:.1rem;
font-size:.85rem;
color:var(--muted);
}
/* Chevron */
.fancy-acc-chevron {
flex-shrink:0;
margin-right:2.5rem;
color:var(--muted);
transition:transform .2s ease, color .2s ease;
}
.fancy-accordion .accordion-title[aria-expanded="true"] .fancy-acc-chevron {
transform:rotate(-180deg);
color:#e5e7eb;
}
/* Panel body – handles max-height animation */
.fancy-accordion .accordion-content.fancy-acc-panel {
overflow: hidden;
max-height: 0;
padding: 0 .95rem;
font-size: .9rem;
color: #e5e7eb;
border-top: 0 solid rgba(148,163,184,.35);
background: linear-gradient(180deg, var(--item-active), rgba(3,7,18,1));
transition: max-height 0.4s ease, padding 0.4s ease, border-top-width 0.1s ease;
}
.fancy-accordion .accordion-content.fancy-acc-panel.open {
max-height: 1000px;
padding: 0 .95rem 1rem .95rem;
border-top-width: 1px;
}
.fancy-acc-panel p {
margin:.7rem 0 .7rem;
padding-bottom:20px;
}
.fancy-acc-panel ul {
padding-left:1.1rem;
margin:.4rem 0 .4rem;
}
/* Cards inside the panel */
.fancy-acc-card {
border-radius:10px;
padding:.75rem .8rem;
background:rgba(15,23,42,.9);
border:1px solid rgba(148,163,184,.5);
box-shadow:0 10px 26px rgba(15,23,42,.7);
margin-bottom: 1.5rem;
}
.fancy-acc-card h5 {
margin:0 0 .2rem;
font-size:.95rem;
color:#ffffff;
}
.fancy-acc-card p {
margin:0;
font-size:.84rem;
color:var(--muted);
}
/* Small-screen tweaks */
@media (max-width: 640px) {
.fancy-accordion-inner {
padding:0.9rem 0.85rem 1.1rem;
}
.fancy-accordion .accordion-title {
padding:.7rem .85rem;
}
.fancy-acc-heading {
font-size:.95rem;
}
}
/* Active accordion title state */
.fancy-accordion .accordion-title[aria-expanded="true"] {
background: linear-gradient(180deg, rgba(110,123,255,.26), rgba(15,23,42,.9));
border-color: rgba(110,123,255,.65);
box-shadow:
0 0 0 1px rgba(148,163,184,.35),
0 16px 40px rgba(15,23,42,.85);
}
/* Optional: slightly lift the whole row when active */
.fancy-accordion .accordion-title[aria-expanded="true"] .fancy-acc-heading {
color: #ffffff;
}
.fancy-accordion .accordion-title[aria-expanded="true"] .fancy-acc-kicker {
color: #c7d2fe;
}