Tabs Examples

                                

                                    

                                        

                                            

                                                
Tab 1
                                                
Tab 2
                                                
Tab 3
                                                
Tab 4
                                                
Tab 5
                                                
Tab 6
                                                
Tab 7
                                                
Tab 8
                                                
Tab 9
                                            
                                            

                                                

                                                    
This tab displays a basic introduction to how RSL Tabs work in a responsive layout.
                                                
                                                

                                                    
This section highlights general features that can be organized using tabbed navigation.
                                                
                                                

                                                    
This area demonstrates how content can be grouped clearly for users and screen readers.
                                                
                                                

                                                    
This tab could represent configuration options or settings in a real interface.
                                                
                                                

                                                    
This content area is ideal for showing technical details, specifications, or notes.
                                                
                                                

                                                    
This tab provides an example of how RSL Tabs help segment related information.
                                                
                                                

                                                    
This panel can be used to present help topics, FAQs, or step-by-step instructions.
                                                
                                                

                                                    
This tab demonstrates how additional categories can be added without altering layout structure.
                                                
                                                

                                                    
This final tab contains placeholder content to show how the tab system handles extended sets.
                                                
                                            
                                        
                                    
                                    

                                        

                                            Second Column
                                        
                                    
                                
                            

                                

                                    
                                    

                                        

                                        

                                             Overview
                                        
                                        

                                             Specs
                                        
                                        

                                             Reviews
                                        
                                        

                                             Shipping
                                        
                                        

                                             Support
                                        
                                    
                                    
                                    

                                        
                                        

                                             Featured
                                            
Why teams pick RSL Tabs
                                            

                                                Clean semantics, ADA-aware focus behavior, and drop-in responsiveness using your grid variables.
                                            
                                            

                                                

                                                    

                                                        
                                                        

                                                            
Fast integration
                                                            
Just add .tab-link + .tab-content and you’re done.
                                                        
                                                    
                                                
                                                

                                                    

                                                        
                                                        

                                                            
Accessible by default
                                                            
Tab focus, labels, and ARIA roles are wired for screen readers.
                                                        
                                                    
                                                
                                                

                                                    

                                                        
                                                        

                                                            
Responsive grid
                                                            
Use your data-cols-* attributes to lay out content.
                                                        
                                                    
                                                
                                            
                                        
                                        
                                        

                                            
Specifications
                                            

                                                

                                                    

                                                        
Keyboard-navigable tablist
                                                        
ARIA roles for tabs and panels
                                                        
Focus ring and skip-links
                                                    
                                                
                                                

                                                    

                                                        
Mobile-first horizontal scroll
                                                        
Animated ink-bar indicator
                                                        
Zero external dependencies
                                                    
                                                
                                            
                                        
                                        
                                        

                                            
Customer Reviews
                                            
 4.9 average (1,248 ratings)
                                            

                                                

                                                    
                                                    

                                                        
“Looks like a real product”
                                                        
Love the polish—tabs feel native, keyboard flow is perfect.
                                                    
                                                
                                                

                                                    
                                                    

                                                        
“Drop-in simple”
                                                        
No rewrites needed—just our HTML and the helper JS.
                                                    
                                                
                                            
                                        
                                        
                                        

                                            
Shipping & Returns
                                            
 Free standard shipping on orders over $49.
                                            

                                                
Ships in 1–2 business days
                                                
30-day no-questions returns
                                                
24/7 email & chat
                                            
                                        
                                        
                                        

                                            
Support
                                            
 We’re here to help.
                                            

                                                

                                                    
                                                    

                                                        
Docs
                                                        
Browse setup guides and API details.
                                                    
                                                
                                                

                                                    
                                                    

                                                        
Live chat
                                                        
Quick answers from the RSL team.
                                                    
                                                
                                            
                                        
                                    
                                
                            

                                // Copy handler that works for any .code-card on the page
                                document.querySelectorAll('.code-card').forEach((card) => {
                                    const btn = card.querySelector('[data-copy]');
                                    const code = card.querySelector('pre > code');
                                 
                                    async function copyCode() {
                                            const text = code.innerText.replace(/^\n|\n\s*$/g, ''); // trim leading/trailing blank lines
                                            try {
                                                await navigator.clipboard.writeText(text);
                                                showStatus('Copied!');
                                        } catch (err) {
                                            // Fallback: older browsers
                                            const ta = document.createElement('textarea');
                                            ta.value = text; document.body.appendChild(ta); ta.select();
                                            try { document.execCommand('copy'); showStatus('Copied!'); }
                                            catch { showStatus('Failed'); }
                                            finally { ta.remove(); }
                                        }
                                    }
                                    
                                    function showStatus(msg) {
                                        const original = btn.innerHTML;
                                        btn.setAttribute('aria-live', 'polite');
                                        btn.innerHTML = `${msg}`;
                                        btn.disabled = true;
                                        setTimeout(() => { btn.innerHTML = original; btn.disabled = false; }, 1400);
                                    }
                                    
                                    
                                    btn.addEventListener('click', copyCode);
                                    // Keyboard shortcut: Ctrl/Cmd+C while focused inside the card copies
                                    card.addEventListener('keydown', (e) => {
                                        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
                                            e.preventDefault();
                                            copyCode();
                                        }
                                    });
                                });
                                document.querySelectorAll('.html-display').forEach((block) => {
                                    // Capture the raw HTML inside
                                    let html = block.innerHTML
                                      .replace(/^\n+|\n+$/g, ''); // trim blank lines top/bottom
                                  
                                    // Detect common leading indentation (spaces/tabs)
                                    const indentMatch = html.match(/^[ \t]+/);
                                    if (indentMatch) {
                                      const indent = indentMatch[0];
                                      const regex = new RegExp('^' + indent, 'gm');
                                      html = html.replace(regex, ''); // remove that indentation globally
                                    }
                                  
                                    // Escape HTML so it displays visibly, not rendered
                                    block.textContent = html;
                                  });
                                  document.querySelectorAll('.js-display').forEach((block) => {
                                    // Get the *decoded* text inside the code block
                                    let html = block.textContent        // ← key change
                                      .replace(/^\n+|\n+$/g, '');       // trim blank lines top/bottom
                                  
                                    // Detect common leading indentation (spaces/tabs)
                                    const lines = html.split('\n');
                                    const firstNonEmpty = lines.find(line => line.trim().length > 0);
                                    const indentMatch = firstNonEmpty && firstNonEmpty.match(/^[ \t]+/);
                                  
                                    if (indentMatch) {
                                      const indent = indentMatch[0];
                                      const re = new RegExp('^' + indent, 'gm');
                                      html = html.replace(re, '');
                                    }
                                  
                                    // Write it back; < and > get escaped, but => stays =>
                                    block.textContent = html;
                                  });