Accordions

Use accordions to show content when clicking on a tab element.

Default accordions

Use the .accordion-panel-header element and add the id of the targeted element to href, data-target and aria-controls attributes.

The element that will be toggled is the .collapse from the following example:

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. 

                                                        
<div class="accordion" id="accordionExample1">
    <div class="card card-sm card-body shadow-sm border-soft">
        <a href="#panel-1" data-target="#panel-1" class="accordion-panel-header"
            data-toggle="collapse" role="button" aria-expanded="false"
            aria-controls="panel-1">
            <span class="h6 mb-0 font-weight-bold">Our Company</span>
            <span class="icon"><i class="fas fa-plus"></i></span>
        </a>
        <div class="collapse" id="panel-1">
            <div class="pt-3">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused
                    on bringing openness and
                    transparency to the design process. We've always
                    believed that by providing
                    a space where designers can share ongoing work not
                    only empowers them to
                    make better products, it also helps them grow.
                    We're proud to be a part of
                    creating a more open culture and to continue
                    building a product that
                    supports this vision.
                </p>
            </div>
        </div>
    </div>
    <div class="card card-sm card-body shadow-sm border-soft">
        <a href="#panel-2" data-target="#panel-2" class="accordion-panel-header"
            data-toggle="collapse" role="button" aria-expanded="false"
            aria-controls="panel-1">
            <span class="h6 mb-0 font-weight-bold">Leaf Components</span>
            <span class="icon"><i class="fas fa-plus"></i></span>
        </a>
        <div class="collapse" id="panel-2">
            <div class="pt-3">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused
                    on bringing openness and
                    transparency to the design process. We've always
                    believed that by providing
                    a space where designers can share ongoing work not
                    only empowers them to
                    make better products, it also helps them grow.
                    We're proud to be a part of
                    creating a more open culture and to continue
                    building a product that
                    supports this vision. </p>
            </div>
        </div>
    </div>
    <div class="card card-sm card-body shadow-sm border-soft">
        <a href="#panel-3" data-target="#panel-3" class="accordion-panel-header"
            data-toggle="collapse" role="button" aria-expanded="false"
            aria-controls="panel-1">
            <span class="h6 mb-0 font-weight-bold">Licenses</span>
            <span class="icon"><i class="fas fa-plus"></i></span>
        </a>
        <div class="collapse" id="panel-3">
            <div class="pt-3">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused
                    on bringing openness and
                    transparency to the design process. We've always
                    believed that by providing
                    a space where designers can share ongoing work not
                    only empowers them to
                    make better products, it also helps them grow.
                    We're proud to be a part of
                    creating a more open culture and to continue
                    building a product that
                    supports this vision. </p>
            </div>
        </div>
    </div>
</div>
Accordions with icons

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. 

                                                    
<div class="accordion">
    <div class="card card-sm card-body shadow-sm border-soft">
        <a href="#panel-4" data-target="#panel-4" class="accordion-panel-header" data-toggle="collapse"
            role="button" aria-expanded="false" aria-controls="panel-1">
            <span class="icon-title h6 mb-0 font-weight-bold"><i class="fab fa-leanpub"></i>Our
                Company</span>
            <span class="icon"><i class="fas fa-plus"></i></span>
        </a>
        <div class="collapse" id="panel-4">
            <div class="pt-3">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused on bringing openness and
                    transparency to the design process. We've always believed that by providing
                    a space where designers can share ongoing work not only empowers them to
                    make better products, it also helps them grow. We're proud to be a part of
                    creating a more open culture and to continue building a product that
                    supports this vision.
                </p>
            </div>
        </div>
    </div>
    <div class="card card-sm card-body shadow-sm border-soft">
        <a href="#panel-5" data-target="#panel-5" class="accordion-panel-header" data-toggle="collapse"
            role="button" aria-expanded="false" aria-controls="panel-1">
            <span class="icon-title h6 mb-0 font-weight-bold"><i class="fas fa-box-open"></i>Pixel
                Components</span>
            <span class="icon"><i class="fas fa-plus"></i></span>
        </a>
        <div class="collapse" id="panel-5">
            <div class="pt-3">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused on bringing openness and
                    transparency to the design process. We've always believed that by providing
                    a space where designers can share ongoing work not only empowers them to
                    make better products, it also helps them grow. We're proud to be a part of
                    creating a more open culture and to continue building a product that
                    supports this vision. </p>
            </div>
        </div>
    </div>
    <div class="card card-sm card-body shadow-sm border-soft">
        <a href="#panel-6" data-target="#panel-6" class="accordion-panel-header" data-toggle="collapse"
            role="button" aria-expanded="false" aria-controls="panel-1">
            <span class="icon-title h6 mb-0 font-weight-bold"><i class="fas fa-donate"></i>Licenses</span>
            <span class="icon"><i class="fas fa-plus"></i></span>
        </a>
        <div class="collapse" id="panel-6">
            <div class="pt-3">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused on bringing openness and
                    transparency to the design process. We've always believed that by providing
                    a space where designers can share ongoing work not only empowers them to
                    make better products, it also helps them grow. We're proud to be a part of
                    creating a more open culture and to continue building a product that
                    supports this vision. </p>
            </div>
        </div>
    </div>
</div>