Recap Card Base: Charts Empty

No notes defined.

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

        <li class="nav-item" role="presentation">
            <button type="button" class="sds-btn -btnSecondary sds-segmentedButtons__btn active" 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 sds-segmentedButtons__btn" 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>

    </ul>

    <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 "@segmented-buttons",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 '@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 '@empty-state--title-text',{
				icon: "icon-graph-l",
				title: "Chart panel 2",
				text: "{Subtitle}",
				textBodyLg: true,
				button: false,
				classes: ["-noPadding"]
			}, true %}
		</div>
	</div>
</div>