The details screen contains information about the account. An Administrator can configure basic account details and billing information. Account Details Description of fields: *required Billing Information Description of fields: Card Details Credit card / payment details can be managed under Account Details. To add or edit card information for payments, follow the steps: Under the tenant information > click ADD NEW CARD Card Details Description of fields: Click Save Changes
An administrator manages account details, users and groups, branding, services, and authentication settings. For more information continue to the sections below. Account Management Summary The Summary displays a brief overview of account management settings. Details Groups Branding Accounts Billing Authentication
Counters and Progress bars are regularly used elements to represents statistics in dashboard style pages Counters: Using 'is--success' 4 / 10 30% last week Using 'is--primary' 280 / 500 56% last week Using 'is--warning' 80% 3% last week Using 'is--danger' 62% 8% last week Using 'is--default' 346 / 1000 3% last week <div class="app-counter is--success"> <!-- modify width height values for sizes --> <svg viewBox="0 0 36 36" class="counter__wrap" width="140px" height="140px" > <path class="counter__circle-bg" stroke="#efefef" d="M18 2.0845a 15.9155 15.9155 0...
List of classes for frequently used style snippets Class Name Style Description .m0 margin: 0; Removes any margin .m10 margin: 10px; Adds margin as 10px on all sides .m20 margin: 20px; Adds margin as 20px on all sides .p0 padding: 0; Removes any padding .p10 padding: 10px; Adds padding as 10px on all sides .p20 padding: 20px; Adds padding as 20px on all sides .text-left text-align: left; Aligns text to left .text-center text-align: center; Aligns text to center .text-right text-align:...
Use buttons of different styles, sizes and types for actions in forms, navigations etc. Default Primary Success Danger Warning Info Light Medium Dark Sizes: Small Default Large Full Width Types: Rounded Disabled Primary outlined Lighter version: (with 'is--light' class) Primary Success Danger Warning Info // All buttons <button class="app-button is--default">Default</button> <button class="app-button is--primary">Primary</button> <button class="app-button is--success">Success</button> <button class="app-button is--danger">Danger</button> <button class="app-button is--warning">Warning</button> <button class="app-button is--info">Info</button> <button class="app-button is--light">Light</button> <button class="app-button is--medium">Medium</button> <button class="app-button is--dark">Dark</button> // Sizes <button class="app-button is--success is--small">Small</button>...
A 12 column layouting option using css grid based properties. Allows for responsive layouting based on responsive break points Basic grid spanning 12 columns: Column 3 Column 3 Column 6 Column 4 Column 8 Column 5 Column 7 With gutter space using class "is--gap-10" "is--gap-20": Column 2 Column 3 Column 2 Column 5 Column 6 - is--gap-20 Column 6 - is--gap-20 <div class="app-grid"> <div class="grid__col-3">Column 3</div> <div class="grid__col-3">Column 3</div> <div class="grid__col-6">Column 6</div> <div class="grid__col-4">Column 4</div> <div class="grid__col-8">Column 8</div> <div class="grid__col-5">Column...
Flex based layout systems are used for layouting, align content and distribute space. CSS flex property is used for setting such layouts Basic layout with as many columns of equal width. This is item 1 This is item 2 This is item 3 This is item 4 This is item 5 Basic layout with different length of content. This is item 1. This has more content and will probably need more space This is item 2. Short one! This is...
Lists are usually multiple rows of items containing text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text. Simple text list: Hello world I am a simple app that has been reused multiple times. I don't complain too much. Go Johnny Go I am a popular song made even more popular by a popular movie. <div class="app-list"> <div class="list__item"> <div class="list__content-item"> <h3>Hello world</h3> <p>I am a simple app that...
Profile or user pictures in a standalone, list of tabular format. Simple Avatar Avatar circled Avatar circled and bordered <!-- add width and height values to set dimensions --> <div class="app-avatar" style="width: 120px; height: 120px;"> <img src="../images/unknown_user.jpg" alt="User Name"> </div> <div class="app-avatar is--circled" style="width: 120px; height: 120px;"> <img src="../images/unknown_user.jpg" alt="User Name"> </div> <div class="app-avatar is--circled is--bordered" style="width: 120px; height: 120px;"> <img src="../images/unknown_user.jpg" alt="User Name"> </div>
Alerts are used to provide contextual feedback to users in their interactions. Use variations of alerts to notify different type of feedback messages Alert! This is a default alert. Success! You did something right. Info! I need to inform something to you. Warning! I need you to pay attention. Danger! Uh oh, somthing bad has occured. <div class="app-alert is--default"> <strong>Alert!</strong> This is a default alert. </div> <div class="app-alert is--success"> <strong>Success!</strong> You did something right. </div> <div class="app-alert is--info"> <strong>Info!</strong> I...