Filters

Filters are used to help users set conditions so that only certain data is displayed. This is done to make it easier to focus on specific information in a large table of data.

Filters

Search emails by all of the following:

Container(s) .filter-wrap
Required .filter-header .filter-title .filter-list .filter-buttons
Optional Elements .filter-option-toggle .filter-search-toggle
<div class="filter-wrap">
<div class="filter-header">
<p class="filter-title">Search emails by <a class="filter-option-toggle" href="#">all</a> of the following:</p>
<div class="btn-list">
<button class="btn btn-small btn-secondary">Clear Search</button>
</div>
</div>
<div class="filter-list">
<div class="row">
<!-- columns containing inputs and selects -->
<i class="filter-row-remove sg-icon sg-icon-x"></i>
</div>
<div class="filter-buttons btn-list">
<button class="btn btn-small btn-secondary">Add a Filter</button>
<button class="btn btn-small btn-primary">Search</button>
</div>
</div>
</div>
view raw filters.html hosted with ❤ by GitHub

Segment Terms

Entry Criteria

The first time a contact is added to New customer list

Or

Croissant lemon drops jelly beans sweet pastry jelly-o toffee muffin candy canes marshmallow chocolate bar gummi bears, cupcake, cheesecake jelly

Exit Criteria

Contacts will leave the series if they no longer meet the entry criteria

Container(s) .segment-term-wrap
Required .segment-term-title .segment-term .segment-term-edit
Modifiers .segment-term-wrap.has-radios .segment-term.is-live
Optional Elements .segment-term.has-separator
<div class="segment-term-wrap">
<p class="segment-term-title">Entry Criteria</p>
<div class="segment-term has-separator">
<p>The first time a contact is added to <strong>New customer list</strong></p>
<i class="sg-icon sg-icon-pencil segment-term-edit"></i>
</div>
</div>
<div class="segment-term-wrap">
<p class="segment-term-title">Or</p>
<div class="segment-term has-separator">
<p>Croissant lemon drops jelly beans sweet pastry jelly-o toffee muffin candy canes marshmallow <strong>chocolate bar gummi bears, cupcake, cheesecake jelly</strong></p>
<i class="sg-icon sg-icon-pencil segment-term-edit"></i>
</div>
<div class="btn-list">
<a class="btn btn-secondary has-icon" href="#"><i class="sg-icon sg-icon-plus"></i> Add Condition</a>
</div>
</div>

Segment Terms Editable

Entry Criteria

within the last

Exit Criteria

Container(s) .segment-term-wrap .segment-term-inputs .segment-condition
Required .segment-term-title .segment-term.is-editable
Modifiers .has-radios
Optional Elements .segment-term.has-separator .sg-icon-check .sg-icon-x
<div class="segment-term-wrap">
<p class="segment-term-title">Entry Criteria</p>
<div class="segment-term is-editable has-separator">
<div class="segment-term-inputs">
<div class="input-select-wrap">
<!-- select markup -->
</div>
<div class="input-select-wrap">
<!-- select markup -->
</div>
<div class="input-select-wrap">
<!-- select markup -->
</div>
<div class="segment-condition">
<p>within the last</p>
<div class="input-text-wrap">
<!-- text input markup -->
</div>
<div class="input-select-wrap">
<!-- select markup -->
</div>
</div>
</div>
<div class="btn-list">
<a class="btn btn-small btn-trash" href="#"><i class="sg-icon sg-icon-trash"></i></a>
</div>
</div>
<div class="btn-list">
<a class="btn btn-secondary has-icon" href="#"><i class="sg-icon sg-icon-plus"></i> Add Condition</a>
</div>
</div>

Segment Terms Alerts

Entry Criteria

The first time a contact is added to New customer list

Changes you've made to your entry criteria have not been applied to your live automation.

Exit Criteria

Changes you've made to your entry criteria have not been applied to your live automation.

Container(s) .segment-term-wrap
Required .segment-term-title .segment-term.has-alert
Optional Elements .segment-term.has-separator .sg-icon-check .sg-icon-x
<div class="segment-term-wrap">
<p class="segment-term-title">Entry Criteria</p>
<div class="segment-term has-alert">
<p>The first time a contact is added to <strong>New customer list</strong></p>
<i class="sg-icon sg-icon-pencil segment-term-edit"></i>
<div class="alert alert-warning">
<p><i class="sg-icon sg-icon-info-circle"></i>Changes you've made to your entry criteria have not been applied to your live automation.<button class="btn btn-small btn-primary">Save and Apply</button></p>
</div>
</div>
</div>

Segment Terms Query

Recent order total is greater than $100

Container(s) .segment-term-wrap.is-query .segment-term-inputs
Required .segment-term
Modifiers .segment-term-wrap.is-collapsed .segment-term-title.is-editable
Optional Elements .segment-term.has-separator .sg-icon-x
<div class="segment-term-wrap is-query">
<div class="segment-term has-separator">
<p>Recent order total is greater than <strong>$100</strong></p>
<i class="sg-icon sg-icon-pencil segment-term-edit"></i>
</div>
</div>
<div class="segment-term-wrap is-query">
<div class="segment-term-switch">
<div class="switch is-and-or">
<input class="switch-checkbox" id="segment-term-and-or-switch-2" type="checkbox">
<div class="switch-selector"></div>
<label class="switch-label" for="segment-term-and-or-switch-2">
<div class="switch-option switch-option-and">And</div>
<div class="switch-option switch-option-or">Or</div>
</label>
</div>
</div>
<div class="segment-term is-editable has-separator">
<!-- select inputs -->
<div class="btn-list">
<a class="btn btn-small btn-trash" href="#"><i class="sg-icon sg-icon-trash"></i></a>
</div>
</div>
<div class="btn-list">
<a class="btn btn-secondary has-icon" href="#"><i class="sg-icon sg-icon-plus"></i> Add Condition</a>
</div>
</div>