Validator
Validator is a block level component, you should use our grid to control the width of it.
Guidelines
Validators make it easy to have a quick overview of how the user’s setup is functioning. Each validator is connected to a process to indicate its operational status, like a ‘health check’. It can be extended to provide insights about the returned results, and to give a trace or solution if an error occurs.
How to use it?
- If something has changed in the system, and a short feedback message is enough to inform the user, consider using a Notice or Alert instead. Validators are preferably more detailed, constant elements, which change their statuses in-line.
- The title should be a short sentence to summarize how the check resulted.
- Highlight the result in the title - if possible -, and use an icon and a color aligned to its meaning. Choose one of the following: positive (success/passed/working/healthy), warning (suspicious/warning), danger (error/failed).
- The description shouldn’t be longer than 5-8 sentences. Provide a link to external documentation if further explanation is needed.
| Last update: | () |
| Message | doc(validator): guidelines and examples |
| Committer: | Tamás Bíró |
| Version history | |
Default
<div class="e-row">
<div class="e-col-6">
<e-validator header="This is validator"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="This is validator"></e-validator>
</div>
</div>Variations
Status
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check have *passed*" status="success"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="You have a *warning*" status="warning"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check has an *error*" status="danger"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check had *no result*"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check have *passed*" status="success"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="You have a *warning*" status="warning"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check has an *error*" status="danger"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check had *no result*"></e-validator>
</div>
</div>Action
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check have *passed*" status="success" action="Read more"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check have *passed*" status="success" action="Read more"></e-validator>
</div>
</div>Action with external link
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check have *passed*" status="success" action="Read more" action-href="https://emarsys.com"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your check have *passed*" status="success" action="Read more" action-href="https://emarsys.com"></e-validator>
</div>
</div>Multi-line title
<div class="e-row">
<div class="e-col-6">
<e-validator header="This title is very long with some dummy text lorem ipsum dolor sit amet consectitur elit *success*" status="success"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="This title is very long with some dummy text lorem ipsum dolor sit amet consectitur elit *success*" status="success"></e-validator>
</div>
</div>Sub-header
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" subheader="KeyMismatch - The private and the public sender key for the sender domain doesn’t match." status="danger"></e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" subheader="KeyMismatch - The private and the public sender key for the sender domain doesn’t match." status="danger"></e-validator>
</div>
</div>Content
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" status="danger">
<e-validator-content>
Sender domain: news.emarsys.com
<br>
Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
</e-validator-content>
</e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" status="danger">
<e-validator-content>Sender domain: news.emarsys.com<br>Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.</e-validator-content>
</e-validator>
</div>
</div>Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
Content with action
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" status="danger">
<e-validator-content>
<ul>
<li>
Sender domain: news.emarsys.com
</li>
<li>
Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
</li>
</ul>
<button class="e-btn e-btn-link">
Why is this important?
</button>
</e-validator-content>
</e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" status="danger">
<e-validator-content>
<ul>
<li>
Sender domain: news.emarsys.com
</li>
<li>
Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
</li>
</ul>
<div class="e-buttongroup e-buttongroup-flex">
<button class="e-btn e-btn-small">
Show DKIM record
</button>
<button class="e-btn e-btn-link">
Why is this important?
</button>
</div>
</e-validator-content>
</e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" status="danger">
<e-validator-content>
<ul>
<li>Sender domain: news.emarsys.com</li>
<li>Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.</li>
</ul>
<button class="e-btn e-btn-link">Why is this important?</button>
</e-validator-content>
</e-validator>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator header="Your DKIM check has *failed*" status="danger">
<e-validator-content>
<ul>
<li>Sender domain: news.emarsys.com</li>
<li>Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.</li>
</ul>
<div class="e-buttongroup e-buttongroup-flex">
<button class="e-btn e-btn-small">Show DKIM record</button>
<button class="e-btn e-btn-link">Why is this important?</button>
</div>
</e-validator-content>
</e-validator>
</div>
</div>- Sender domain: news.emarsys.com
- Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
- Sender domain: news.emarsys.com
- Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
Summary
<div class="e-row">
<div class="e-col-6">
<div class="e-field">
<e-validator summary="Optional caption" summary-value="3" summary-type="danger"></e-validator>
<e-validator header="Your check have *passed*" status="success"></e-validator>
<e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
<e-validator header="Your other test has an *error*" status="danger"></e-validator>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<div class="e-field">
<e-validator summary="Optional caption" summary-value="1,3" summary-type="success,danger"></e-validator>
<e-validator header="Your check have *passed*" status="success"></e-validator>
<e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
<e-validator header="Your other test has an *error*" status="danger"></e-validator>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator summary="Optional caption" summary-value="3" summary-type="danger"></e-validator>
<e-validator header="Your check have *passed*" status="success">
<e-validator-content>
Sender domain: news.emarsys.com
</e-validator-content>
</e-validator>
<e-validator header="Your test resulted 2 *errors*" status="danger">
<e-validator-content>
Sender domain: news.emarsys.com
</e-validator-content>
</e-validator>
<e-validator header="Your other test has an *error*" status="danger">
<e-validator-content>
Sender domain: news.emarsys.com
</e-validator-content>
</e-validator>
<div class="e-boxpadding text-align-right">
<button class="e-btn">
Show details
</button>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<div class="e-field">
<e-validator summary="Optional caption" summary-value="3" summary-type="danger"> </e-validator>
<e-validator header="Your check have *passed*" status="success"></e-validator>
<e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
<e-validator header="Your other test has an *error*" status="danger"></e-validator>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<div class="e-field">
<e-validator summary="Optional caption" summary-value="1,3" summary-type="success,danger"> </e-validator>
<e-validator header="Your check have *passed*" status="success"></e-validator>
<e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
<e-validator header="Your other test has an *error*" status="danger"></e-validator>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-6">
<e-validator summary="Optional caption" summary-value="3" summary-type="danger"></e-validator>
<e-validator header="Your check have *passed*" status="success">
<e-validator-content>Sender domain: news.emarsys.com</e-validator-content>
</e-validator>
<e-validator header="Your test resulted 2 *errors*" status="danger">
<e-validator-content>Sender domain: news.emarsys.com</e-validator-content>
</e-validator>
<e-validator header="Your other test has an *error*" status="danger">
<e-validator-content>Sender domain: news.emarsys.com</e-validator-content>
</e-validator>
<div class="e-boxpadding text-align-right">
<button class="e-btn">Show details</button>
</div>
</div>
</div>