<h5>TOPBAR (primary Version)</h5>
<div class='topbar bg-primary' class="topbar-dark">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-light'>
<span class="text-muted">
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance primary
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
<h5>TOPBAR (secondary Version)</h5>
<div class='topbar bg-secondary' class="topbar-light">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-dark'>
<span>
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance secondary
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
<h5>TOPBAR (success Version)</h5>
<div class='topbar bg-success' class="topbar-light">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-dark'>
<span>
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance success
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
<h5>TOPBAR (danger Version)</h5>
<div class='topbar bg-danger' class="topbar-dark">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-light'>
<span class="text-muted">
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance danger
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
<h5>TOPBAR (warning Version)</h5>
<div class='topbar bg-warning' class="topbar-light">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-dark'>
<span>
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance warning
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
<h5>TOPBAR (info Version)</h5>
<div class='topbar bg-info' class="topbar-light">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-dark'>
<span>
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance info
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
<h5>TOPBAR (light Version)</h5>
<div class='topbar bg-light' class="topbar-light">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-dark'>
<span>
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance light
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
<h5>TOPBAR (dark Version)</h5>
<div class='topbar bg-dark' class="topbar-dark">
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div class='d-none d-md-block text-nowrap me-3 text-light'>
<span class="text-muted">
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance dark
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
{{#each colors}}
<h5>TOPBAR ({{name}} Version)</h5>
<div
class='topbar bg-{{name}}'
{{#if dark}}
class="topbar-dark"
{{else}}
class="topbar-light"
{{/if}}
>
<div class='container d-md-flex align-items-center px-0 px-xl-3'>
<div
{{#if dark}}
class='d-none d-md-block text-nowrap me-3 text-light'
{{else}}
class='d-none d-md-block text-nowrap me-3 text-dark'
{{/if}}
>
<span
{{#if dark}}
class="text-muted"
{{/if}}
>
<i class='fas fa-clock me-1'></i>
<strong class='me-2'>
Maintenance {{name}}
</strong>
</span>
Networks will not be available starting August 15th, 9:00am CST (lasting
10h)
<a class='topbar-link me-1' href='/support'></a>
Need Support?
</a>
</div>
</div>
</div>
{{/each}}
{
"colors": [
{
"id": 1,
"name": "primary",
"dark": true
},
{
"id": 2,
"name": "secondary"
},
{
"id": 3,
"name": "success"
},
{
"id": 4,
"name": "danger",
"dark": true
},
{
"id": 5,
"name": "warning"
},
{
"id": 6,
"name": "info"
},
{
"id": 7,
"name": "light"
},
{
"id": 8,
"name": "dark",
"dark": true
}
]
}
No notes defined.