contained box pattern

========================

The contained box pattern is a fundamental design principle in the Apiary platform, ensuring that every interaction is predictable and user-friendly. This pattern combines bounded height, internal scrolling, and accordion functionality to create an intuitive and visually appealing experience.

Goals and Rationale

• Provide a clear visual hierarchy and structure for content
• Ensure that users are aware of the boundaries between sections
• Prevent endless page scrolling and provide a seamless user experience

Key Components

1. Bounded Height

The contained box pattern starts with a bounded height, which prevents the content from expanding indefinitely. This is achieved by setting a fixed or maximum height for the container element.

.container {
    max-height: 500px;
}

2. Internal Scroll

When the content exceeds the bounded height, internal scrolling comes into play. This allows users to scroll within the container without disrupting the overall page flow.

<div class="container">
    <!-- content here -->
</div>

3. Accordion Functionality

Accordion functionality is used to expand and collapse sections of content. This pattern ensures that only relevant information is displayed at a time, preventing visual clutter and overwhelming users with too much data.

<div class="accordion">
    <button class="accordion-button">Expand/Collapse</button>
    <div class="accordion-content">
        <!-- content here -->
    </div>
</div>

<style>
    .accordion {
        max-height: 0;
        overflow: hidden;
    }
    
    .accordion-button {
        cursor: pointer;
    }
    
    .accordion-content {
        padding: 20px;
        background-color: #f7f7f7;
    }
</style>

<script>
    const accordionButton = document.querySelector('.accordion-button');
    const accordionContent = document.querySelector('.accordion-content');

    accordionButton.addEventListener('click', () => {
        if (accordionContent.style.maxHeight === '') {
            accordionContent.style.maxHeight = `${accordionContent.scrollHeight}px`;
            accordionButton.textContent = 'Collapse';
        } else {
            accordionContent.style.maxHeight = '';
            accordionButton.textContent = 'Expand';
        }
    });
</script>

Implementation Guidelines

1. Use bounded height to establish a clear visual hierarchy.
2. Implement internal scrolling to allow users to navigate within the container.
3. Incorporate accordion functionality to manage and display content effectively.

Best Practices

• Ensure that the bounded height is sufficient for the content, but not so large that it becomes overwhelming.
• Use clear and concise labeling for accordion sections to help users understand what they're interacting with.
• Test thoroughly to ensure a seamless user experience across various devices and screen sizes.

By following these guidelines and best practices, you can effectively implement the contained box pattern in your Apiary project, providing a polished and intuitive UI/UX experience for your users.