Design System

Accordion

An accordion is a UI design pattern that organizes content into collapsible sections. In Outback Nursery homepage, the accordion is used to display information about the seasonal offerings, gift certificates, and peak season plants. The accordion is a great way to display information in a structured manner, allowing users to access information quickly and efficiently.

Illustration of an Accordion Implementation

NEW! Decorative pots, stepping stones, birdbaths, benches and garden ornaments/statuary

1. Contact info@outbacknursery.ca via email.

2. Submit an e-transfer to info@outbacknursery.ca with your desired amount.

3. Upon receipt of the e-transfer, we'll promptly send you a voucher via email or to an alternative address of your preference..

The peak period for fruit trees spans from mid-March to mid-April.

Optimal hedging seasons occur in April and September, ideal for selecting trees from our farm.

HTML Code

          
            <div class="c-seasonal__accordion-wrapper l-flex l-flex-column l-mt-1-25 center-content">
              
              <div class="c-seasonal__accordion l-mx-1">
                <button class="c-seasonal__accordion-header u-primary-font u-body l-p-1-25">
                  <span class="c-seasonal__accordion-name u-letter-spacing-4 u-subheading">Offerings</span>
                </button>
                <div class="c-seasonal__accordion-body l-px-1 l-py-1">
                  <p class="c-seasonal__accordion-text text-width">
                    NEW! Decorative pots, stepping stones, birdbaths, benches and garden ornaments/statuary
                  </p>
                </div>
              </div>
              
              <div class="c-seasonal__accordion l-mx-1">
                <button class="c-seasonal__accordion-header u-primary-font u-body l-p-1-25">
                  <span class="c-seasonal__accordion-name u-letter-spacing-4 u-subheading">Gift Certificates</span>
                </button>
                <div class="c-seasonal__accordion-body c-seasonal__accordion--active l-px-1 l-py-1">
                  <p class="c-seasonal__accordion-text text-width">
                    1. Contact info@outbacknursery.ca via email.
                  </p>
                  <p class="c-seasonal__accordion-text text-width">
                    2. Submit an e-transfer to info@outbacknursery.ca with your desired amount.
                  </p>
                  <p class="c-seasonal__accordion-text text-width">
                    3. Upon receipt of the e-transfer, we'll promptly send you a voucher via email or to an alternative address of your preference..
                  </p>
                </div>
              </div>
              
              <div class="c-seasonal__accordion l-px-1">
                <button class="c-seasonal__accordion-header u-primary-font u-body l-p-1-25">
                  <span class="c-seasonal__accordion-name u-letter-spacing-4 u-subheading">Peak Season Plants</span>
                </button>
                <div class="c_seasonal__accordion-body l-px-1 l-py-1">
                  <p class="c-seasonal__accordion-text text-width">
                    The peak period for fruit trees spans from mid-March to mid-April.
                  </p>
                  <p class="c-seasonal__accordion-text text-width">
                    Optimal hedging seasons occur in April and September, ideal for selecting trees from our farm.
                  </p>
                </div>
              </div>
            </div>