Recap Card Base: Charts Empty

No notes defined.

<div class="sds-recapCard sds-box -insetLg sds-stackLg">
    <nav>
        <ul class="sds-toggleTab list-unstyled nav" id="" role="tablist">

            <li class="nav-item" role="presentation">
                <button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive active" id="sidebar-bar-chart-1-tab" data-toggle="tab" data-target="#sidebar-bar-chart-1" role="tab" aria-controls="sidebar-bar-chart-1" aria-selected="true">

                    <span class="sds-btn__text">Débit/Crédit</span>

                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn" id="sidebar-bar-chart-2-tab" data-toggle="tab" data-target="#sidebar-line-chart-1" role="tab" aria-controls="sidebar-line-chart-1" aria-selected="false">

                    <span class="sds-btn__text">Evolution</span>

                </button>
            </li>

            </li>
        </ul>
    </nav>
    <div class="tab-content" id="sidebar-bar-charts">
        <div class="tab-pane fade show active" id="sidebar-bar-chart-1" role="tabpanel" aria-labelledby="sidebar-bar-chart-1-tab">
            <div class="sds-emptyState text-center -noPadding">
                <div class="sds-stackXs">
                    <span class="sds-emptyState__icon sds-icon sds-icon-graph-l"></span>
                    <div class="sds-stackXxs">
                        <p class="sds-textBodyLg sds-textSemiBold">Chart panel 1</p>

                        <p class="sds-textSemiBold">{Subtitle}</p>

                    </div>
                </div>

            </div>
        </div>
        <div class="tab-pane fade" id="sidebar-line-chart-1" role="tabpanel" aria-labelledby="sidebar-bar-chart-2-tab">
            <div class="sds-emptyState text-center -noPadding">
                <div class="sds-stackXs">
                    <span class="sds-emptyState__icon sds-icon sds-icon-graph-l"></span>
                    <div class="sds-stackXxs">
                        <p class="sds-textBodyLg sds-textSemiBold">Chart panel 2</p>

                        <p class="sds-textSemiBold">{Subtitle}</p>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="{{ namespace }}recapCard {{ namespace }}box -insetLg {{ namespace }}stackLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@toggle-tab--tabs",recapCardtoggleTabOptions,true %}
	<div class="tab-content" id="sidebar-bar-charts">
		<div class="tab-pane fade show active" id="{{ recapCardtoggleTabOptions.toggleTabItems[0].target }}" role="tabpanel" aria-labelledby="{{ recapCardtoggleTabOptions.toggleTabItems[0].id }}">
			{% render '@snet-empty-state--title-text',{
				icon: "icon-graph-l",
				title: "Chart panel 1",
				text: "{Subtitle}",
				textBodyLg: true,
				button: false,
				classes: ["-noPadding"]
			}, true %}
		</div>
		<div class="tab-pane fade" id="{{ recapCardtoggleTabOptions.toggleTabItems[1].target }}" role="tabpanel" aria-labelledby="{{ recapCardtoggleTabOptions.toggleTabItems[1].id }}">
			{% render '@snet-empty-state--title-text',{
				icon: "icon-graph-l",
				title: "Chart panel 2",
				text: "{Subtitle}",
				textBodyLg: true,
				button: false,
				classes: ["-noPadding"]
			}, true %}
		</div>
	</div>
</div>