Details

Source: https://dripyard.com/docs/dripyard-base/components/drupal/details

Theme: dripyard-base

A collapsible details disclosure widget that provides an expandable/collapsible content area with smooth CSS animations. This component is commonly used for form sections, FAQ items, and content organization.

Technical Implementation Note:

• Uses interpolate-size to enable CSS-only open/close animations. Note this may not work on browsers that do not support this property.

Accessibility Considerations:

• Animations are disabled if user has prefers-reduced-motion enabled.

Overview

The details component renders an HTML `` element with enhanced styling and animations. It includes a clickable summary that toggles the visibility of nested content, with smooth height transitions and customizable styling.

Usage

{% embed 'dripyard_base:details' with {
  title: 'Custom Content'
} %}
  {% block details_content %}
    Your custom HTML content goes here

    
      - List item 1

      - List item 2

    
  {% endblock %}
{% endembed %}

Props

Slots

CSS Custom Properties

The component uses the following CSS variables for customization:

• --details-border-color - Sets the border color around the details element
• --details-border-radius - Controls the corner rounding of the details element
• --details-background-color - Sets the background color of the details element
• --details-text-color - Controls the text color of the content area
• --details-legend-text-color - Sets the text color of the summary/title
• --details-padding-block - Controls the vertical padding inside the details element
• --details-padding-inline - Controls the horizontal padding inside the details element
• --details-animation-duration - Sets the duration of open/close animations

Accessibility Features

Motion Considerations

• Respects user preferences: Animations are disabled if user has prefers-reduced-motion enabled
• Smooth transitions: 200ms linear animations for comfortable interaction