brand-01
brand-02
brand-03
text-01
inverse-01
ui-01
ui-02
ui-03
ui-04
ui-05
ui-06
ui-07
ui-08
ui-09
ui-10
ui-11
support-01
support-02
support-03
support-04
colors scss functions: color('color-name')
color-alpha('color-name') Example: color('brand-01')
color-alpha('brand-01') colors helper classes: text-color-name
bg-color-name Example: text-brand-01
bg-brand-01 Headings
Heading 1 : Sample Heading Text
Heading 2 : Sample Heading Text
Heading 3 : Sample Heading Text
Heading 4 : Sample Heading Text
Heading 5 : Sample Heading Text
Paragraph Text
Anchor TextPrimary Buttons
Secondary Buttons
Buttons with left icon
Buttons with right icon
Buttons with gated content
Anchor tag (a)
Unordered List
- Item One
- Item Two
- Sub Item One
- Sub Item Two
- Sub Item Three
- Sub Sub Item One
- Sub Sub Item Two
- Sub SubItem Three
- Item Three
- Item Four
<ul>
<li>Item One</li>
<li>
Item Two
<ul>
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>
Sub Item Three
<ul>
<li>Sub Sub Item One</li>
<li>Sub Sub Item Two</li>
<li>Sub SubItem Three</li>
</ul>
</li>
</ul>
</li>
<li>Item Three</li>
<li>Item Four</li>
</ul> Ordered List
- Item One
- Item Two
- Sub Item One
- Sub Item Two
- Sub Item Three
- Sub Sub Item One
- Sub Sub Item Two
- Sub SubItem Three
- Item Three
- Item Four
<ol>
<li>Item One</li>
<li>
Item Two
<ol>
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>
Sub Item Three
<ol>
<li>Sub Sub Item One</li>
<li>Sub Sub Item Two</li>
<li>Sub SubItem Three</li>
</ol>
</li>
</ol>
</li>
<li>Item Three</li>
<li>Item Four</li>
</ol> Toastrs
Use xng-toastr-service to display toastrs messages.
success( title?: string, message?: string );
info( title?: string, message?: string );
warning( title?: string, message?: string );
error( title?: string, message?: string );
<button class="button primary small"
onclick="iziToast.success({title: 'Success', message: 'Here we have a success message !!', icon: false})">
Fire a success alert
</button> Try to fire alert:
Sample Code:
<div id="transactionModal" class="reveal-modal" data-reveal data-reveal-init tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-wrapper" role="document">
<div class="reveal-modal-bg"></div>
<div class="modal-wrap">
<div class="modal-label">
<label class="form-heading">Optional Label</label>
</div>
<div class="modal-title">
<h3 id="modalTitle">Transaction Modal</h3>
</div>
<div class="modal-body">
<p>Content..</p>
</div>
<div class="modal-actions">
<div class="button-group-left">
<button class="button primary small">Save</button>
<button type="button" class="button secondary small" onclick="$('.close-reveal-modal').click()">Close</button>
</div>
</div>
<button class="close-reveal-modal" aria-label="Close"></button>
</div>
</div>
</div> Passive Modal
Passive modal notifications should only appear if there is an action the user needs to address immediately. Passive modal notifications are persistent on screen.
Important directions or information can be Bold.
Transaction Modal
Transactional modals are used to validate decisions or gain secondary confirmation from the user. Typically, the modal requests either a 'yes' or 'no' response.
Tables
| Date | Invoice # | Due Date | Ship To | PO # | Terms | Total | Balance |
|---|---|---|---|---|---|---|---|
| 15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
| 15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
| 15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
| 15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
| 15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Page {{$index}}