Fieldset Examples
This component of the Design System is deprecated, which means it'll be replaced or removed soon. Until that, the Design System team will support existing implementations, but please avoid implementing this component in new projects.
We suggest to use actionlist component instead.
.e-fieldset
<fieldset class="e-fieldset">
<div class="e-row">
<div class="e-col-12">
<div class="e-fieldset__item e-fieldset__item-chart">
In incididunt ea magna proident
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
Minim excepteur sint cillum minim
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Labore eu lorem et fugiat
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Quis aliqua id dolor excepteur
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Duis id sit deserunt anim
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Sed minim veniam amet laborum
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Incididunt ad irure id dolor
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Exercitation qui quis eu adipiscing
</div>
</div>
</div>
</fieldset><div class="e-field">
<div class="e-grid">
<div class="e-cell e-cell-auto e-cell-medium e-cell-border_left e-cell-border_top e-cell-border_bottom e-cell-border_right">
<div class="e-field">
<label class="e-field__label">
Title
</label>
<div class="e-grid">
<div class="e-cell e-cell-auto">
<input class="e-input">
</div>
<div class="e-cell e-cell-sticky">
<a class="e-btn e-btn-onlyicon">
<e-icon icon="user"></e-icon>
</a>
</div>
</div>
<span class="e-field__message">
Title Text Length: 0
</span>
</div>
<label class="e-field__label">
Body Text
<div class="e-toolbox"></div>
</label>
<div class="e-toolbox__content">
<div class="e-toolbox__actions">
<e-tooltip class="float-left" content="Tooltip content goes here">
<div class="e-btn e-btn-onlyicon e-svgclickfix">
<e-icon icon="user"></e-icon>
</div>
</e-tooltip>
</div>
<e-tooltip class="float-right" content="Tooltip content goes here">
<div class="text-color-warning">
<e-icon icon="warning" color="warning" type="table"></e-icon>
<strong>
150/140
</strong>
</div>
</e-tooltip>
</div>
<textarea class="e-input e-input-textarea"></textarea>
<span class="e-field__message">
Body Text Length: 0
</span>
</div>
<div class="e-cell e-cell-sticky">
<div class="e-fieldset e-fieldset-sidebar" style="height:286px;">
<div class="e-fieldset__item e-fieldset__item-chart">
English -
<span class="text-color-shade">
32%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
Russian -
<span class="text-color-shade">
7.5%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Deutsch -
<span class="text-color-shade">
2.6%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
French -
<span class="text-color-shade">
56%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Turkish -
<span class="text-color-shade">
86%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Hungarian -
<span class="text-color-shade">
12%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Spanish -
<span class="text-color-shade">
0.13%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Swedish -
<span class="text-color-shade">
0.13%
</span>
</div>
</div>
<a class="e-btn e- e-btn-fieldset">
<e-icon icon="cog"></e-icon>
Manage Language
</a>
</div>
</div>
</div><div class="e-field">
<div class="e-field__label">
Body Text
</div>
<div class="e-toolbox">
<div class="e-toolbox__content">
<div class="e-toolbox__actions">
<e-tooltip class="float-left" content="Tooltip content goes here">
<div class="e-btn e-btn-onlyicon e-svgclickfix">
<e-icon icon="user"></e-icon>
</div>
</e-tooltip>
</div>
<e-tooltip class="float-right" content="Tooltip content goes here">
<div class="text-color-warning">
<e-icon icon="warning" color="warning" type="table"></e-icon>
<strong>
150/140
</strong>
</div>
</e-tooltip>
</div>
</div>
<div class="e-flex e-flex-sticky">
<textarea class="e-flex__item e-flex__item-auto e-input e-input-textarea e-input-auto_height" placeholder="Type text here"></textarea>
<div class="e-flex__item">
<div class="e-fieldset e-fieldset-sidebar">
<div class="e-fieldset__item e-fieldset__item-chart">
English -
<span class="text-color-shade">
32%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
Russian -
<span class="text-color-shade">
7.5%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Deutsch -
<span class="text-color-shade">
2.6%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
French -
<span class="text-color-shade">
56%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Turkish -
<span class="text-color-shade">
86%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Hungarian -
<span class="text-color-shade">
12%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Spanish -
<span class="text-color-shade">
0.13%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Swedish -
<span class="text-color-shade">
0.13%
</span>
</div>
</div>
<a class="e-btn e- e-btn-fieldset">
<e-icon icon="cog"></e-icon>
Manage Language
</a>
</div>
</div>
</div><fieldset class="e-fieldset">
<div class="e-row">
<div class="e-col-12">
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input class="e-checkbox e-checkbox-impressions" id="legend-impressions" type="checkbox" checked="checked" data-id="0">
<label title="Impressions" for="legend-impressions">
Impressions
</label>
<div class="e-fieldset__item__indicator background-color-impressions"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-reach" type="checkbox" data-id="1">
<label title="Reach" for="legend-reach">
Reach
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input class="e-checkbox e-checkbox-frequency" id="legend-frequency" type="checkbox" data-id="2" checked>
<label title="Frequency" for="legend-frequency">
Frequency
</label>
<div class="e-fieldset__item__indicator background-color-frequency"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-socialreach" type="checkbox" data-id="3">
<label title="Social reach" for="legend-socialreach">
Social Reach
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-clicks" type="checkbox" data-id="4">
<label title="Clicks" for="legend-clicks">
Clicks
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-likes" type="checkbox" data-id="5">
<label title="Likes" for="legend-likes">
Likes
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-comments" type="checkbox" data-id="6">
<label title="Comments" for="legend-comments">
Comments
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-pageclick" type="checkbox" data-id="7">
<label title="Page click" for="legend-pageclick">
Page Clicks
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-conversions" type="checkbox" data-id="8">
<label title="Conversions" for="legend-conversions">
Conversions
</label>
<div class="e-fieldset__item__indicator"></div></div></div></div>
</fieldset><fieldset class="e-fieldset">
<div class="e-row">
<div class="e-col-12">
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input class="e-checkbox e-checkbox-impressions" id="legend-impressions2" type="checkbox" checked="checked" data-id="0">
<label class="e-legend" title="Impressions" for="legend-impressions2">
<div class="e-legend__value text-color-impressions">
34.7K
<small>
18K
</small>
</div>
<div class="e-legend__title">
Impressions
<e-tooltip content="Tooltip content goes here" type="helper"></e-tooltip>
</div>
</label>
<div class="e-fieldset__item__indicator background-color-impressions"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input class="e-checkbox" id="legend-reach2" type="checkbox" data-id="1">
<label class="e-legend" title="Reach" for="legend-reach2">
<div class="e-legend__value">
24.1K
<small>
11K
</small>
</div>
<div class="e-legend__title">
Reach
<e-tooltip content="Tooltip content goes here" type="helper"></e-tooltip>
</div>
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input class="e-checkbox e-checkbox-frequency" id="legend-frequency2" type="checkbox" data-id="2" checked>
<label class="e-legend" title="Frequency" for="legend-frequency2">
<div class="e-legend__value text-color-frequency">
18.3K
<small>
8K
</small>
</div>
<div class="e-legend__title">
Frequency
<e-tooltip content="Tooltip content goes here" type="helper"></e-tooltip>
</div>
</label>
<div class="e-fieldset__item__indicator background-color-frequency"></div></div></div></div>
</fieldset>