TL;DR Component Documentation

Overview

The TL;DR component provides a simple, clean way to add “Too Long; Didn’t Read” summaries to your content. It’s designed to be less fancy than sidenotes, with a distinctive purple theme that stands out without overwhelming the page.

Visual Design

┌────────────────────────────────────────────┐
│ TL;DR                                      │ ← Purple header label
├────────────────────────────────────────────┤
│                                            │
│ Your summary content appears here with    │ ← Body with gradient background
│ full markdown support.                     │
│                                            │
│ - Lists work                               │
│ - **Bold text** works                      │
│ - Everything markdown!                     │
│                                            │
└────────────────────────────────────────────┘
  │
  └─ 4px purple left border (#8e44ad)

Features

• ✅ Clean, minimal design
• ✅ Purple theme consistent with tldr sidenotes
• ✅ Subtle gradient background
• ✅ Left border accent
• ✅ Full markdown support
• ✅ Optional collapse functionality
• ✅ Mobile responsive
• ✅ No floating badge (simpler than sidenotes)

Basic Usage

Simple Summary

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    
      <p>Quick summary of the article below.</p>

    
  </div>
</div>

Multi-Paragraph Summary

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    
      
<p>This article discusses three main topics:</p>

<ol>
  <li><strong>First Topic</strong> - Brief description</li>
  <li><strong>Second Topic</strong> - Brief description</li>
  <li><strong>Third Topic</strong> - Brief description</li>
</ol>

<p>Perfect for readers who want the highlights!</p>

    
  </div>
</div>

Collapsible TL;DR

Open by Default (Recommended)

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    
      








<div class="collapsible-wrapper">
  <div class="collapsible-header" onclick="window.toggleCollapsible('show-hide-summary-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-show-hide-summary-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Show/Hide Summary</span>
  </div>
  <div class="collapsible-content" id="content-show-hide-summary-now" style="display: none;">
    <div class="collapsible-body">
      
<p>Your summary here…</p>

    </div>
  </div>
</div>

    
  </div>
</div>

Best for:

• Moderate-length summaries
• First-time readers
• Content where summary adds value

Closed by Default

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    
      








<div class="collapsible-wrapper">
  <div class="collapsible-header" onclick="window.toggleCollapsible('show-hide-summary-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-show-hide-summary-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Show/Hide Summary</span>
  </div>
  <div class="collapsible-content" id="content-show-hide-summary-now" style="display: none;">
    <div class="collapsible-body">
      <p>…</p>

    </div>
  </div>
</div>

    
  </div>
</div>

Best for:

• Very long summaries
• Repeat readers
• Optional context

Parameters

Parameter	Type	Default	Description
content	string	required	Summary text (supports markdown)
title	string	“TL;DR”	Custom label for the header
collapse	boolean	false	Enable collapse functionality
collapsed	boolean	false	Start in collapsed state
collapse_title	string	“Show/Hide Summary”	Caption next to disclosure triangle

Styling

Color Scheme

• Primary color: #8e44ad (purple)
• Hover color: #a569bd (lighter purple)
• Background: Linear gradient from rgba(142, 68, 173, 0.08) to rgba(142, 68, 173, 0.03)
• Border: 4px solid #8e44ad

Typography

• Label: Bold, uppercase, 0.9rem, 1.5px letter-spacing
• Body: 0.95rem, 1.6 line-height
• Code: Purple background with purple text

Spacing

• Margin: 2rem vertical (1.5rem on tablet, 1.2rem on mobile)
• Padding:
  • Header: 0.8rem horizontal, 0.5rem bottom
  • Body: 1.2rem horizontal, 1rem bottom
  • Adjusts on smaller screens

Design Philosophy

Why Different from Sidenotes?

TL;DR components are intentionally simpler because:

1. Purpose: Quick summaries vs. detailed explanations
2. Placement: Front-section vs. contextual
3. Hierarchy: Primary content preview vs. supplementary information
4. Visual weight: Lighter presence for better flow

Design Decisions

• ✅ No floating badge - Cleaner, less visual complexity
• ✅ Left border - Subtle but distinctive marker
• ✅ Gradient background - Stands out without overwhelming
• ✅ Purple theme - Consistent with existing tldr sidenote type
• ✅ Collapsed defaults to false - Summaries should be visible by default

Usage Guidelines

When to Use TL;DR

✅ Good Use Cases:

• Article summaries at the beginning
• Key takeaways before detailed content
• Quick reference for returning readers
• Highlighting main points
• Executive summaries

❌ Avoid Using For:

• Contextual notes (use sidenotes instead)
• Warnings or important notices (use warning sidenotes)
• Technical details (use info sidenotes)
• Content that’s critical to understanding

Best Practices

1. Keep it concise - It’s a TL;DR, after all
2. Use bullet points - Easier to scan
3. Front-load value - Most important points first
4. Bold key terms - Highlight takeaways
5. Default to visible - Use collapsed=false or no collapse

Examples

Article Summary

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    
      
<p><strong>Quick Summary</strong>: This guide explains how to build a REST API.</p>

<p><strong>You’ll learn:</strong></p>
<ul>
  <li>Setting up the server</li>
  <li>Creating endpoints</li>
  <li>Database integration</li>
  <li>Authentication</li>
</ul>

<p><strong>Time to complete</strong>: ~30 minutes</p>

    
  </div>
</div>

Tutorial Summary

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">Tutorial Overview</span>
  </div>
  <div class="tldr-body">
    
      
<p>In this tutorial, we’ll create a todo app using React.</p>

<p><strong>Prerequisites:</strong></p>
<ul>
  <li>Node.js installed</li>
  <li>Basic JavaScript knowledge</li>
  <li>1 hour of time</li>
</ul>

<p><strong>What we’ll build</strong>: A fully functional todo list with add, delete, and mark complete features.</p>

    
  </div>
</div>

Collapsible Summary

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    
      








<div class="collapsible-wrapper">
  <div class="collapsible-header" onclick="window.toggleCollapsible('show-hide-full-summary-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-show-hide-full-summary-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Show/Hide Full Summary</span>
  </div>
  <div class="collapsible-content" id="content-show-hide-full-summary-now" style="display: none;">
    <div class="collapsible-body">
      
<p>This comprehensive guide covers web performance optimization.</p>

<p><strong>Topics covered:</strong></p>
<ol>
  <li>Image optimization techniques</li>
  <li>Code splitting strategies</li>
  <li>Caching best practices</li>
  <li>CDN configuration</li>
  <li>Monitoring and analytics</li>
</ol>

<p><strong>Expected reading time</strong>: 45 minutes</p>

<p><strong>Skill level</strong>: Intermediate to Advanced</p>

    </div>
  </div>
</div>

    
  </div>
</div>

Comparison with Other Components

Feature	TL;DR	Sidenote	Collapsible
Floating badge	❌	✅	❌
Left border	✅	❌	❌
Gradient bg	✅	❌	❌
Collapse support	✅	✅	✅ (required)
Style variants	❌	✅ (6 types)	❌
Primary use	Summaries	Context	Any content
Visual weight	Light	Medium-Heavy	Light

Technical Details

HTML Structure

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    <!-- Content or collapsible component -->
  </div>
</div>

CSS Classes

• .tldr-wrapper - Main container
• .tldr-header - Header section
• .tldr-label - Label text (“TL;DR”)
• .tldr-body - Content area
• .tldr-error - Error state modifier

Responsive Breakpoints

• Desktop (>768px): Full size with 4px border
• Tablet (≤768px): Reduced padding, 3px border
• Mobile (≤480px): Minimal padding, compact spacing

Accessibility

• Semantic HTML structure
• Sufficient color contrast (purple on white/gradient)
• Keyboard accessible when using collapse
• Screen reader friendly

Browser Support

Works in all modern browsers:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS/Android)

Requires:

• CSS gradients support
• Flexbox support
• CSS transitions (for collapse animation)

Migration from Sidenotes

If you’re using tldr-type sidenotes and want to switch:

Before:

  
  
  

<blockquote id="tl-dr" class="custom-sidenote custom-sidenote-tldr">
  <div class="sidenote-badge">
    <span class="sidenote-icon">
      
        
            👀
          
      
    </span>
    <span class="sidenote-title"><a href="#tl-dr" class="sidenote-anchor">#</a> TL;DR</span>
  </div>
  <div class="sidenote-body">
    
      <p>Summary…</p>

    
  </div>
</blockquote>
 

After:

<div class="tldr-wrapper">
  <div class="tldr-header">
    <span class="tldr-label">TL;DR</span>
  </div>
  <div class="tldr-body">
    
      <p>Summary…</p>

    
  </div>
</div>

Benefits of switching:

• Cleaner visual design
• Better semantic meaning
• Simpler code
• Consistent with content summary purpose