Logo
Logo
Stockholm-icons / Design / Layers Created with Sketch. 3 Stockholm-icons / Media / Equalizer Created with Sketch. Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
image
Accordions
Actions

Basic Accordions

Latest Orders
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                        <div class="accordion accordion-toggle-arrow" id="accordionExample1">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title" data-toggle="collapse" data-target="#collapseOne1">
                                        Latest Orders
                                    </div>
                                </div>
                                <div id="collapseOne1" class="collapse show" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo1">
                                        Product Updates
                                    </div>
                                </div>
                                <div id="collapseTwo1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree1">
                                        ...
                                    </div>
                                </div>
                                <div id="collapseThree1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>

Light Accordions

Recent Reports
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                        <div class="accordion accordion-light accordion-toggle-arrow" id="accordionExample2">
        					<div class="card">
        						<div class="card-header" id="headingOne2">
        							<div class="card-title" data-toggle="collapse" data-target="#collapseOne2">
        								Recent Reports
        							</div>
        						</div>
        						<div id="collapseOne2" class="collapse show" data-parent="#accordionExample2">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingTwo2">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo2">
        								Accounting Updates
        							</div>
        						</div>
        						<div id="collapseTwo2" class="collapse"  data-parent="#accordionExample2">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingThree2">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree2">
        								Latest Payroll
        							</div>
        						</div>
        						<div id="collapseThree2" class="collapse" data-parent="#accordionExample2">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        				</div>

Solid Style

Recent Reports
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                        <div class="accordion accordion-solid accordion-toggle-plus" id="accordionExample3">
                            <div class="card">
                                <div class="card-header" id="headingOne3">
                                    <div class="card-title" data-toggle="collapse" data-target="#collapseOne3">
                                        Recent Reports
                                    </div>
                                </div>
                                <div id="collapseOne3" class="collapse show" data-parent="#accordionExample3">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingTwo3">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo3">
                                        Accounting Updates
                                    </div>
                                </div>
                                <div id="collapseTwo3" class="collapse" data-parent="#accordionExample3">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingThree3">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree3">
                                        Latest Payroll
                                    </div>
                                </div>
                                <div id="collapseThree3" class="collapse" data-parent="#accordionExample3">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>

Light Style With SVG Icons

Stockholm-icons / Navigation / Angle-double-right Created with Sketch.
Product Inventory
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                        <div class="accordion accordion-light accordion-light-borderless accordion-svg-toggle" id="accordionExample7">
                        	<div class="card">
                        		<div class="card-header" id="headingOne7">
                        			<div class="card-title" data-toggle="collapse" data-target="#collapseOne7">
                        				<span class="svg-icon svg-icon-primary">
                        					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        							<polygon points="0 0 24 0 24 24 0 24"></polygon>
                        							<path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                        							<path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                        						</g>
                        					</svg>
                        				</span>
                        				<div class="card-label pl-4">Product Inventory</div>
                        			</div>
                        		</div>
                        		<div id="collapseOne7" class="collapse show" data-parent="#accordionExample7">
                        			<div class="card-body pl-12">
                        				...
                        			</div>
                        		</div>
                        	</div>
                        	<div class="card">
                        		<div class="card-header" id="headingTwo7">
                        			<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo7">
                        				<span class="svg-icon svg-icon-primary">
                        					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        							<polygon points="0 0 24 0 24 24 0 24"></polygon>
                        							<path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                        							<path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                        						</g>
                        					</svg>
                        				</span>
                        				<div class="card-label pl-4">Order Statistics</div>
                        			</div>
                        		</div>
                        		<div id="collapseTwo7" class="collapse" data-parent="#accordionExample7">
                        			<div class="card-body pl-12">
                        				...
                        			</div>
                        		</div>
                        	</div>
                        	<div class="card">
                        		<div class="card-header" id="headingThree7">
                        			<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree7">
                        				<span class="svg-icon svg-icon-primary">
                        					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        							<polygon points="0 0 24 0 24 24 0 24"></polygon>
                        							<path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                        							<path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                        						</g>
                        					</svg>
                        				</span>
                        				<div class="card-label pl-4">eCommerce Reports</div>
                        			</div>
                        		</div>
                        		<div id="collapseThree7" class="collapse" data-parent="#accordionExample7">
                        			<div class="card-body pl-12">
                        				...
                        			</div>
                        		</div>
                        	</div>
                        </div>

With Icons

User Permissions
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                        <div class="accordion  accordion-toggle-arrow" id="accordionExample4">
        					<div class="card">
        						<div class="card-header" id="headingOne4">
        							<div class="card-title" data-toggle="collapse" data-target="#collapseOne4">
        								<i class="flaticon2-layers-1"></i> User Permissions
        							</div>
        						</div>
        						<div id="collapseOne4" class="collapse show" data-parent="#accordionExample4">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingTwo4">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo4">
        								<i class="flaticon2-copy"></i> Account Settings
        							</div>
        						</div>
        						<div id="collapseTwo4" class="collapse" data-parent="#accordionExample4">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingThree4">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree4">
        								<i class="flaticon2-bell-alarm-symbol"></i> Application Options
        							</div>
        						</div>
        						<div id="collapseThree4" class="collapse" data-parent="#accordionExample4">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        				</div>

Light Style With Icons

Product Inventory
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                        <div class="accordion accordion-light  accordion-toggle-arrow" id="accordionExample5">
        					<div class="card">
        						<div class="card-header" id="headingOne5">
        							<div class="card-title" data-toggle="collapse" data-target="#collapseOne5">
        								<i class="flaticon-pie-chart-1"></i> Product Inventory
        							</div>
        						</div>
        						<div id="collapseOne5" class="collapse show" data-parent="#accordionExample5">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingTwo5">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo5">
        								<i class="flaticon2-notification"></i> Order Statistics
        							</div>
        						</div>
        						<div id="collapseTwo5" class="collapse" data-parent="#accordionExample5">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingThree5">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree5">
        								<i class="flaticon2-chart"></i> eCommerce Reports
        							</div>
        						</div>
        						<div id="collapseThree5" class="collapse" data-parent="#accordionExample5">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        				</div>

Solid Style With Icons

Product Inventory
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                        <div class="accordion accordion-solid accordion-toggle-plus" id="accordionExample6">
        					<div class="card">
        						<div class="card-header" id="headingOne6">
        							<div class="card-title" data-toggle="collapse" data-target="#collapseOne6">
        								<i class="flaticon-pie-chart-1"></i> Product Inventory
        							</div>
        						</div>
        						<div id="collapseOne6" class="collapse show" data-parent="#accordionExample6">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingTwo6">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo6">
        								<i class="flaticon2-notification"></i> Order Statistics
        							</div>
        						</div>
        						<div id="collapseTwo6" class="collapse" data-parent="#accordionExample6">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        					<div class="card">
        						<div class="card-header" id="headingThree6">
        							<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree6">
        								<i class="flaticon2-chart"></i> eCommerce Reports
        							</div>
        						</div>
        						<div id="collapseThree6" class="collapse" data-parent="#accordionExample6">
        							<div class="card-body">
        								...
        							</div>
        						</div>
        					</div>
        				</div>
Product Inventory
Stockholm-icons / Navigation / Angle-double-right Created with Sketch.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

                <div class="accordion accordion-solid accordion-panel accordion-svg-toggle" id="accordionExample8">
                	<div class="card">
                		<div class="card-header" id="headingOne8">
                			<div class="card-title" data-toggle="collapse" data-target="#collapseOne8">
                				<div class="card-label">Product Inventory</div>
                				<span class="svg-icon">
                					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                							<polygon points="0 0 24 0 24 24 0 24"></polygon>
                							<path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                							<path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                						</g>
                					</svg>
                				</span>
                			</div>
                		</div>
                		<div id="collapseOne8" class="collapse show" data-parent="#accordionExample8">
                			<div class="card-body">
                				...
                			</div>
                		</div>
                	</div>
                	<div class="card">
                		<div class="card-header" id="headingTwo8">
                			<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo8">
                				<div class="card-label">Order Statistics</div>
                				<span class="svg-icon">
                					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                							<polygon points="0 0 24 0 24 24 0 24"></polygon>
                							<path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                							<path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                						</g>
                					</svg>
                				</span>
                			</div>
                		</div>
                		<div id="collapseTwo8" class="collapse" data-parent="#accordionExample8">
                			<div class="card-body">
                				...
                			</div>
                		</div>
                	</div>
                	<div class="card">
                		<div class="card-header" id="headingThree8">
                			<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree8">
                				<div class="card-label">eCommerce Reports</div>
                				<span class="svg-icon">
                					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                							<polygon points="0 0 24 0 24 24 0 24"></polygon>
                							<path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                							<path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                						</g>
                					</svg>
                				</span>
                			</div>
                		</div>
                		<div id="collapseThree8" class="collapse" data-parent="#accordionExample8">
                			<div class="card-body">
                				...
                			</div>
                		</div>
                	</div>
                </div>
2024© Keenthemes
About Team Contact
SAP UI Progress
67%Average
Airplus Budget
87K%23k to goal

Todo

Create FireStone Logo Due in 2 Days
Stakeholder Meeting Due in 3 Days
Scoping & Estimations Due in 5 Days
Sprint Showcase Due in 1 Day
Project Retro Due in 12 Days

Tasks Overview Pending 10 tasks

Stockholm-icons / Home / Library Created with Sketch.
Project Briefing Project Manager
Stockholm-icons / Communication / Write Created with Sketch.
Concept Design Art Director
Stockholm-icons / Communication / Group-chat Created with Sketch.
Functional Logics Lead Developer
Stockholm-icons / General / Attachment2 Created with Sketch.
Development DevOps
Stockholm-icons / Communication / Shield-user Created with Sketch.
Testing QA Managers

Notifications 24 New

5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry

Quick Actions finance & reports

Stockholm-icons / Shopping / Euro Created with Sketch. Accounting
Stockholm-icons / Communication / Mail-attachment Created with Sketch. Members
Stockholm-icons / Shopping / Box2 Created with Sketch. Projects
Stockholm-icons / Communication / Group Created with Sketch. Customers
Stockholm-icons / Shopping / Chart-bar1 Created with Sketch. Email
Stockholm-icons / Design / Color-profile Created with Sketch. Settings
Stockholm-icons / Shopping / Euro Created with Sketch. Orders

User Profile 12 messages

James Jones
Application Developer
Stockholm-icons / Communication / Mail-notification Created with Sketch. jm@softplus.com Sign Out
Stockholm-icons / General / Notification2 Created with Sketch.
My Profile
Account settings and more update
Stockholm-icons / Shopping / Chart-bar1 Created with Sketch.
My Messages
Inbox and tasks
Stockholm-icons / Files / Selected-file Created with Sketch.
My Activities
Logs and notifications
Stockholm-icons / Communication / Mail-opened Created with Sketch.
My Tasks
latest tasks and projects
Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch.
Purpose would be to persuade Due in 2 Days
-27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch.
Purpose would be to persuade Due in 2 Days
-27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Default RTL Version
Demo 2
Default RTL Version
Demo 3
Default RTL Version
Demo 4
Default RTL Version
Demo 5
Default RTL Version
Demo 6
Default RTL Version
Demo 7
Default RTL Version
Demo 8
Default RTL Version
Demo 9
Default RTL Version
Demo 10
Default RTL Version
Demo 11
Default RTL Version
Demo 12
Default RTL Version
Demo 13
Default RTL Version
Demo 14
Coming soon
Demo 15
Coming soon
Demo 16
Coming soon
Demo 17
Coming soon
Demo 18
Coming soon
Demo 19
Coming soon
Demo 20
Coming soon
Demo 21
Coming soon
Demo 22
Coming soon
Demo 23
Coming soon
Demo 24
Coming soon
Demo 25
Coming soon
Demo 26
Coming soon
Demo 27
Coming soon
Demo 28
Coming soon
Demo 29
Coming soon
Demo 30
Coming soon
Buy Metronic Now!