# Overview

An overview about Drift HTML version

Demo: <https://drift-angular.g-axon.work>

Drift Angular is a complete starter-kit for BootStrap and Angular lovers. With Drift Angular , you can set admin panel, SaaS application, a Web Portal, CMS or any web UI in minutes.

Drift Angular also ships in-built sample application UI which you could directly use in your app. These app UI include Todo App, Mail App, Contacts App and Chat App.

Apart from the above mentioned in-built apps, Drift Angular also features pages like Login, Signup, Social Media Wall, Profile, Lock Screen, General error pages along with hundreds of widgets and metrics ready for you to jump start with your next project.

### Key Features

* BootStrap 4.x
* Angular 9
* NPM (Node Package Manager)
* Gulp
* 3 Themes - Light, Semi-dark and Dark
* 8 Unique layouts
* In Full-width, Boxed and Framed layouts
* RTL Supported

Drift Angular follows the best practices your next generation app.


# Package Content

Once you download the zipped folder from your [**Themeforest** ](https://themeforest.net/user/g-axon/portfolio)account and extract that. You will get the folder like below:

drift-angular-v-2.x.x

Inside this folder, you will receive following sub-folders and files:

1. **design sources**\
   In this folder you will found design files in 4 format.
   1. **Figma Source**&#x20;
   2. **PSDs (Photoshop files)**
   3. **Sketch Files**
   4. **XD Source**<br>
2. **docs**
3. **html-jquery-version**\
   In this folder you will found all HTML jQuery version source code and docs
   1. **docs**
   2. **drift**
   3. **drift-rtl**
   4. **drift-classic**
   5. **drift-classic-rtl**<br>
4. **skeleton**: Source code of starter template
5. **skeleton-rtl**: Source code of RTL starter template
6. **skeleton-without-auth**: Source code of starter template without auth
7. **source**: Source code of demo template
8. change-log.txt


# Setup Environment

Setup Environment to develop your app.

In order to kickstart the development of your web app with Drift Angular, the very first thing you need to do is to setup an angular development environment.

Following tools are needed to setup an angular dev environment:

### Node JS

Node JS works as a node package manager behind the scene. It is recommended to download and install the latest version of Node JS from its official site[ http://nodejs.org/](http://nodejs.org/)

### Angular CLI

&#x20; [Angular CLI](https://github.com/angular/angular-cli) is a tool to initialize, develop, scaffold and maintain Angular applications.

You will need to install the latest version of Angular CLI on your machine. To install the Angular CLI, Open your favorite console application (Terminal, Command Prompt etc.), run the following command and wait for it to finish:

```
$ npm install -g @angular/cli
```

### Gulp

You will need [Gulp ](https://gulpjs.com/)to compile the Sass. To install the Gulp latest version run the following command and wait for it to finish:

```
$ npm install -g gulp-cli
```

After having all these tools installed on your machine, your machine is now ready to start with the angular development with Drift Angular.


# Setup Project

To setup your project from scratch, follow the below steps:

### STEP 1 - Pick the Skeleton (Starter Template)

In this step, you can pick any of the given skeleton templates (as mentioned in Product Overview section) and copy & paste that to the location where you want to setup your project.

Once, the skeleton folder is copied over, you can rename the folder and can give it to the name of your project.

### STEP 2 - Install All Dependencies

To install dependencies open your terminal (command prompt in Windows) and locate your project using the CD command.

Now, run the following command to install all the dependencies Drift Angular has in its package.json:

```
$ npm install
```

### STEP 3 - Run Your Project

To run your project, run the following command:&#x20;

```
$ ng serve --open
```

or

```
$ npm run start
```

### STEP 4 - Prepare Build of Your Project

The build files will be stored in **/dist** directory.&#x20;

To prepare a build of your project, you would need to run the following command in your terminal:

```
$ ng build --prod
```

There is an alternative one that you can use. The following command will run the **ng build --prod** command with an increased memory size so your app can be built:

```
$ npm run build
```

&#x20;For more information about angular-cli commands, check the [angular-cli](https://github.com/angular/angular-cli).


# Setup Layout

Setup layout which we want to use in our App.

To setup layout point path of that layout in routes as following :

`{` \
&#x20;    `path: '',` \
&#x20;    `loadChildren: './layouts/default-layout/default-layout.module#DefaultLayoutModule',` \
&#x20;    `canActivate: [AuthGuard] // Make Auth Route`\
`}`

```typescript
const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/home'
  },
  {
    path: '',
    loadChildren: './layouts/auth-layout/auth.module#AuthModule'
  },
  {
    path: '',
    loadChildren: './layouts/default-layout/default-layout.module#DefaultLayoutModule',
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: '/home'
  }
];
```

We are using **Default Layout** in the above example. You can chenge layout you want to use. To see layouts list, go to [Layouts](/structure/layouts).


# Deployment

To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.

### Building locally

To build your application locally or for production, You need to follow [Setup Project](/installation-and-setup/setup-project#step-4-prepare-build-of-your-project)  STEP 4 - Prepare Build of Your Project.

### **Hosting the built project**

The files in the `dist/` folder are static and can be hosted on any web server capable of serving file&#x73;**.**

To host a Drift Angular app on web host, you'll need to upload or send the files to the host. Because you are building a Single Page Application, you'll also need to make sure you redirect any invalid URLs to your `index.html` file.

For more details to deploy an Angular app go to [Deployment](https://angular.io/start/deployment).


# Folders and Files Structure

## Overview

The below image gives a quick overview of the folder and file structure Drift follows:

<div align="left"><img src="https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LwSxPwQDwQ02a4U-GML%2F-Lu2iwxFR8_s6KObsSCI%2Ffolders-and-files-structure.png?alt=media&amp;token=70f1828e-3f56-4deb-85ff-35e3c0ec1693" alt=""></div>

* node\_modules/\
  All the dependency and third party libraries are placed in this folder.<br>
* src/\
  This will contain the source code of your project.<br>
  * app/\
    As usually angular offers to manage all the project related files in the app/ folder. So, this is the root app/ folder for the project. This app folder contains the following important sub-folders and files:<br>
    * content/\
      This folder basically contains all the files which represents to the content area of the layout.<br>
    * data-db/ (will available In source dir only)\
      This folder contains all the JSON formatted data being used throughout the demo.<br>
    * layouts/\
      This folder contains all the layout examples of the demo. You can keep only the layout which you want in your project. Or you can add your own custom layout here.<br>
    * settings/\
      This folder contains a service related to settings of the demo. The same could be used in your project to add/extend settings as per your project requirement.<br>
    * app.service.ts\
      This file contains service to fetch data from server which is being used in layouts etc.<br>
    * app-routing.module.ts\
      This file contains the base routes of the project and this defines which layout will be loaded.<br>
  * assets/\
    This assets/ folder contains all the required assets related to project. For example, css, sass, fonts, images, third-party assets etc.<br>
  * environments/\
    This is a default folder from Angular CLI<br>
  * gaxon/\
    This folder contains all the global components, directives, helpers, services, pipes, modules. These are reusable elements which could be used anywhere in your project.<br>
  * scss/\
    This folder contains all the scss files which defines the styling of the project.<br>
* packages.json\
  This file holds the list of all packages to be installed via `$ npm install` cammand<br>
* gulpfile.js\
  This file defines tasks to compile sass files. So, whenever you make any changes to sass files, you can run the following command to compile those changes:\
  \
  `$ gulp`\
  \
  There are more commands related to watch command etc. which you can explore by going through this file.

## src/assets/

The below image gives an insight of the assets/ folder:

<div align="left"><img src="https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LwSxPwQDwQ02a4U-GML%2F-Lu2jvw-jgrznBTqpUxU%2Fassets.png?alt=media&amp;token=2e4256e7-00e6-41cb-8b2f-808be79d2417" alt=""></div>

Following sub-folders explain the management of these different type of assets:

* css/\
  This folder contains the css files for all the layouts. Inside this css/ folder, you can find all the layout folders and each layout folder contains css files for both RTL and without RTL version.\
  \
  You can keep only those layout folders which you wish to use in your project.<br>
* fonts/\
  This folder contains the web-fonts used throughout the project.<br>
* images/\
  This folder contains all the images used throughout the project.<br>
* i18n/\
  This folder contains the language translations for different languages.<br>
* vendor/\
  This folder contains the third-party assets. For example, gaxon-icon/ folder which is a custom font icon set designed and developed by G-axon.


# Layouts

Drift Angular has lots of layout that fullfill your requirements to develop a Amaizing App.

There are following layouts which Drift Angular provides:

### Default Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/default-layout/default-layout.module#DefaultLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcbD0v8qfZbkdOS%2Flayout-default.png?alt=media\&token=9f977e4c-a8aa-43bf-8f4f-2cf440d75377)

### SAAS Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/saas-layout/saas-layout.module#SaasLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBce-wL79vtoqY2m%2Flayout-saas.png?alt=media\&token=03169774-6649-4315-99b9-6047e37a83a5)

### Listing Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/listing-layout/listing-layout.module#ListingLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcfgK8z4ruWGyWg%2Flayout-listing.png?alt=media\&token=95804b18-c6a9-4b7d-b658-f79e51f253df)

### Intranet Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/intranet-layout/intranet-layout.module#IntranetLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcVwzeIM5w5fveB%2Flayout-intranet.png?alt=media\&token=55170ef8-485b-4e9d-b185-7fa14054adac)

### Back Office Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/back-office-layout/back-office-layout.module#BackOfficeLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBca690ezw8EkabC%2Flayout-back-office.png?alt=media\&token=5b7fd3f9-e3a4-47b0-a35a-a4d2dce35149)

### Back Office Minimal Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/back-office-mini-layout/back-office-mini-layout.module#BackOfficeMiniLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBc_pVoTDv-c29dE%2Flayout-back-office-mini.png?alt=media\&token=035c5025-ff98-414e-be69-2e21d6a284c1)

### Modern Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/modern-layout/modern-layout.module#ModernLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcdgyd2U9vJ_Fxo%2Flayout-modern.png?alt=media\&token=0052867d-cad6-4406-9a5b-12d8ac699aae)

### CRM Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/default-layout/crm-layout.module#CrmLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBccov7apkWFRv_e%2Flayout-crm.png?alt=media\&token=6229a418-0b80-4f64-8813-cf96fe63dd3d)

### Common Layouts

There are two common layouts for authentication and frontend pages.

#### Auth Layout

Auth layout will use to authenticate user. Here user can signup and sign-in.

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/auth-layout/auth.module#AuthModule'
```

and add AuthGuard to other reoutes to stop access without sign-in.

```typescript
canActivate: [AuthGuard]
```

#### Frontend Layout

Frontend layout will use to for frontent pages in Drift Angular.

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/frontend-layout/frontend-layout.module#FrontendLayoutModule'
```


# Drift Icons

Custom icons of Drift template

We have created custom icons for Drift. Click [here](https://drift-angular.g-axon.work/assets/vendor/gaxon-icon/icons-reference.html) to get list of all icons of Drift.


# Overview

In Drift Angular best practices have been followed for SCSS coding.

{% hint style="info" %}

#### Important <a href="#important" id="important"></a>

Drift Angular is utilizing the BootStrap 4 as much as possible. Which means, you can make use of BootStrap classes directly most of the time rather than putting yourself in a learning mode to learn about each and every unique class.

This sets Drift Angular apart from other competitors and gives an ease to developers in getting into
{% endhint %}

Another fact is, Drift Angular is following the BEM (Block Element Modifier) methodology to speed up the development process and ease the teamwork of developers.


# Sass Variables

To find all the Sass variables, you will need to access the below file:

```bash
src / scss / layouts / {layout} / themes / {theme} / _variables.scss
```

{% hint style="info" %}

#### Where

{layout} is the layout you want to work in. For example, default

{theme} is either the existing theme provided by Drift or the one created your own custom one
{% endhint %}

In Drift Angular, All of the BootStrap variables are copied over in \_variables.scss. Many of those are customized as per the layout and theme but there are still few variables which we didn't customize. Those variables are commented in \_variables.scss

So, whenever you feel like you need to customize those variables too, you can uncomment those and set the specific value in there.


# Layouts & Theme

Classes related to layouts

This section covers the documentation about the classes which builds the layout .

The following table details about those classes:

```css
/* Layout Related Classes
-------------------------------- */
/* Below is a unique class for default layout. For other layouts, 
you can replace default (after --) with the name of those layouts.
for example .dt-layout--crm */
.dt-layout--default  



/* Sidebar Related Classes (Only for layouts with sidebar)
-------------------------------- */
/* To fix the sidebar */
.dt-sidebar--fixed   

/* To make the sidebar folded */
.dt-sidebar--folded  

/* To expend the sidebar
(Drift uses this on on-hover event when the sidebar is in folded mode) */
.dt-sidebar--expended  



/* Header Related Classes (Only for default layouts)
-------------------------------- */
/* To fix the header */
.dt-header--fixed   



/* Framing Related Classes 
--------------------------------- */
/* To make the framing fluid */
.dt-layout--full-width  

/* To make the framing covered from all four sides */
.dt-layout--framed   

/* To make the framing in boxed style (or fixed width) */
.dt-layout--boxed    



/* Theme Related Classes (only for default layout)
---------------------------------- */
/* To apply the semi-dark theme */
.theme-semidark      

/* To apply the light theme */
.theme-light         

/* To apply the dark theme */
.theme-dark  
```

The following classes are related to the layouts with drawer and will be applied to sidebar:

```css
/* to convert the sidebar into drawer */
.dt-drawer

/* To switch the drawer position either right or left */
.position-right
.position-left
```


# Fonts

Setting up a font for your project

In your project, you would want to setup your own selected font. This section is a step-by-step guide on how to setup your custom font to your project.

Before moving further, Lets talk about the ways you can setup font in your project:

There could be two ways you could setup fonts in your project:

* Via online font resources like Google Fonts
* Via your custom web-font kit

Here below, these two ways are going to be detailed one by one.

## Via Online Font Resources (Google Fonts)

For this, you will need to visit Google Fonts and pick the font you want to setup in Drift Angular.

Once you hit the **+** icon and customize the different font-weights you need, you can then go to the EMBED tab and then select @STANDARD tab.

Here on this tab, you will need to copy the entire \<link> tag. Just like this is highlighted in the picture below for reference:

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-Lu6cCSi1ZiNkeujZ-Q5%2F-Lu6d4SF5-b6IYCuNM9k%2FGoogle%20Fonts.png?alt=media\&token=0ddba138-f23f-4ad4-af28-a6d9f35cdec7)

After copying the link, you need to place this in the \<head> section of your page or layout file.

This is the first step completed successfully and you have font resources included in your project.

Now, the last thing you need to do is, changing the values of font variables in SCSS. For that, you will need to follow the steps explained in **Change Font Variables** below.

## Via Custom Web-Font Kit

For this, first of all, you must have a web-font-kit folder having all web font files.

Then you need to copy that folder into `src / assets / fonts /` and make sure that you have a `style.css` file in your web-font kit folder which has all weights and font-family set as given in below example:

```css
@font-face {
  font-family: 'NoirPro';
  src: url('NoirPro-Light.eot?#iefix') format('embedded-opentype'),
  url('NoirPro-Light.woff') format('woff'),
  url('NoirPro-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'NoirPro';
  src: url('NoirPro-Regular.eot?#iefix') format('embedded-opentype'),
  url('NoirPro-Regular.woff') format('woff'),
  url('NoirPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'NoirPro';
  src: url('NoirPro-Medium.eot?#iefix') format('embedded-opentype'),
  url('NoirPro-Medium.woff') format('woff'),
  url('NoirPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'NoirPro';
  src: url('NoirPro-SemiBold.eot?#iefix') format('embedded-opentype'),
  url('NoirPro-SemiBold.woff') format('woff'),
  url('NoirPro-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'NoirPro';
  src: url('NoirPro-Bold.eot?#iefix') format('embedded-opentype'),
  url('NoirPro-Bold.woff') format('woff'),
  url('NoirPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'NoirPro';
  src: url('NoirPro-Heavy.eot?#iefix') format('embedded-opentype'),
  url('NoirPro-Heavy.woff') format('woff'),
  url('NoirPro-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}
```

Now, the last thing you need to do is, changing the values of font variables in SCSS. For that, you will need to follow the steps explained in **Change Font Variables** below.

## Change Font Variables

In this step, you could change the SCSS variables in the file given below:

```bash
src / scss / layouts / {layout} / themes / {theme} / _variables.scss
```

{% hint style="info" %}

#### Where

{layout} is the layout you want to work in. For example, default

{theme} is either the existing theme provided by Drift Angular or the one created your own custom one
{% endhint %}

Following are most common font related variables which you might be looking to change values for:

{% code title="src / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}

```css
$font-family-sans-serif: 'NoirPro', sans-serif;
//$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif;
// stylelint-enable value-keyword-case

$font-size-base: 1.4rem; // Assumes the browser default, typically `10px`
$font-size-lg: 1.6rem;
$font-size-sm: 1.2rem;

//$font-weight-lighter:         lighter !default;
//$font-weight-light:           300 !default;
//$font-weight-normal:          400 !default;
//$font-weight-bold:            700 !default;
//$font-weight-bolder:          bolder !default;

//$font-weight-base:            $font-weight-normal !default;
$line-height-base: 1.4;

$h1-font-size: 2.2rem;
$h2-font-size: 2rem;
$h3-font-size: 1.8rem;
$h4-font-size: 1.6rem;
$h5-font-size: 1.4rem;
$h6-font-size: 1.2rem;

$headings-margin-bottom: 1.8rem;
//$headings-font-family:        null !default;
$headings-font-weight: $font-weight-normal;
//$headings-line-height:        1.2 !default;
$headings-color: $white;

$display1-size: 4rem;
$display2-size: 3.6rem;
$display3-size: 3rem;
$display4-size: 2.4rem;
$display5-size: 2rem !default;
$display6-size: 1.8rem !default;

$display1-weight: $font-weight-normal;
$display2-weight: $font-weight-normal;
$display3-weight: $font-weight-normal;
$display4-weight: $font-weight-normal;
$display5-weight: $font-weight-normal !default;
$display6-weight: $font-weight-normal !default;
$display-line-height: $headings-line-height;

$lead-font-size: 2rem;
$lead-font-weight: 200;

//$small-font-size:             80% !default;

$text-muted: $text-color;

$blockquote-small-color: $text-color;
//$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: 1.8rem;
```

{% endcode %}


# Colors

Customizing colors in your project

This section details how you could customize color variables for your project.

There are following type of color variables you can change for your project:

* BootStrap Base Colors
* Custom Colors

### BootStrap Base Colors

{% code title="src / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}

```css
$app-primary: #512DA8 !default;
$app-secondary: #FF4081 !default;
$primary: $app-primary;
$secondary: $app-secondary;
$success: #52c41a;
$info: #1890ff;
$warning: #fa8c16;
$danger: #f44336;
$light: #e5e5e5;
$dark: #212121;
```

{% endcode %}

{% hint style="info" %}

#### `NOTE`

`$app-primary` and `$app-secondary` are custom Drift colors which gives you an option to extend the primary and secondary colors of the theme in your own custom theme file.
{% endhint %}

### Custom Colors

{% code title="src / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}

```css
$text-color: #757575 !default;
$text-color-dark: #212121 !default;
$primary-light: lighten($primary, 40%) !default;
$light-green: #1dce8e !default;
$dark-green: #3d6003 !default;
$light-blue: #5797fc !default;
$light-cyan: #00bcd4 !default;
$dark-blue: #0060ca !default;
$sky-blue: #00aeef !default;
$light-pink: #ff415a !default;
$brown: #5e1e21 !default;
$light-brown: #b23737 !default;
$light-teal: #1b8abe !default;
```

{% endcode %}

#### Typography Colors

{% code title="src / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}

```css

//$body-bg: $white !default;
$body-color: $text-color;

$link-color: theme-color("primary");
$link-hover-color: darken($link-color, 10%);

$headings-color: $text-color-dark;
```

{% endcode %}

#### Other Misc Colors

{% code title="src / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}

```css
$border-color: #ddd;

/* header colors */
$header-bg: $primary !default;
$header-color: rgba($white, 0.75) !default;
$header-color-hover: rgba($white, 1) !default;
$dt-brand-bg: $header-bg !default;
$dt-brand-color: $header-color !default;

/* sidebar colors */
$sidebar-bg: #110a21 !default;
$sidebar-color: #d1c4e9 !default;
$sidebar-color-hover: $secondary !default;
$sidebar-active-bg: #1e1532 !default;
$sidebar-active-color: $sidebar-color-hover !default;
$sidebar-submenu-color: $sidebar-color !default;
$sidebar-header-color: $text-color !default;
$sidebar-separator: #383245 !default;

/* footer colors */
$footer-bg: $gray-100 !default;
$footer-color: $text-color !default;

/* custom drawer colors */
$dt-drawer-bg: $white !default;
$dt-backdrop-bg: rgba($black, 0.4) !default;

/* colors for sidebar in apps */
$module-sidebar-bg: $white !default;
$module-sidebar-color: $text-color-dark !default;
$module-sidebar-color-hover: $secondary !default;
```

{% endcode %}

{% hint style="info" %}
There are many other color variables which you can find in the same file. You can customize those as per your need.
{% endhint %}


# Back Ground Images

Customize background images in your project.

This section details how you could customize background images for your project. Exa: Login, Signup, Lock Screen etc.

There are two steps to change background images:

* Update Path in Variable Scss file
* Update Background Images name

### Update Path in Variable SCSS file

```css
src / scss / layouts / {layout} / themes / {theme} / _variables.scss

//Image path
$image-path: '../../images' !default;
// Above path represent: src/assets/images
// After compiling scss, css files save at src/assets/css/{layout}
```

### Update Background Images name

To update background images go to following file and update the images name as you need.

```css
src / scss / core / globals / _bg-images.scss

.bg {
  &-image-v1 {
    @include background-img('#{$image_path}/bg-images/bg-image.jpg', center center);
  }

  &-image-v2 {
    @include background-img('#{$image_path}/bg-images/bg-image-1.jpg', center center);
  }

  &-image-v3 {
    @include background-img('#{$image_path}/bg-images/bg-image-2.jpg', center center);
  }

  &-image-v4 {
    @include background-img('#{$image_path}/bg-images/bg-image-3.jpg', center center);
  }

  &-image-v5 {
    @include background-img('#{$image_path}/bg-images/bg-image-4.jpg', center center);
  }

  &-image-v6 {
    @include background-img('#{$image_path}/bg-images/bg-image-5.jpg', center center);
  }

  &-image-v7 {
    @include background-img('#{$image_path}/bg-images/bg-image-6.jpg', center center);
  }
}
```

To update login, signup and lock screen pages images go to following file and update the image name.

```css
src / scss / core / pages / _login.scss

//Login Style
&__bg-section {
    position: relative;
    padding: $dt-card-padding-y $dt-card-padding-x;
    @include background-img('#{$image_path}/bg-images/login-image.jpg', center bottom);
    color: $white;
    display: flex;
    flex-direction: column;
    
//Lock Screen
.#{$class-prefix}-lock-screen {
  @include background-img('#{$image_path}/bg-images/bg-image-1.jpg', center center);
  text-align: center;
```


# Margin & Paddings

Ways to manage margin and padding in your project

For margin and padding, Drift Angular utilizes the classes provided by BootStrap. You can use the same class names throughout the project.

To change the values of spacing for these margin and padding, you can change the values for $spacer in  `src / scss / layouts / {layout} / themes / {theme} / _variables.scss` as mentioned below:

{% code title="src / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}

```css
$spacer: 1.6rem;
$spacers: ();
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge((
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: ($spacer * .75),
    4: $spacer,
    5: ($spacer * 1.25),
    6: ($spacer * 1.5),
    7: ($spacer * 1.75),
    8: ($spacer * 2),
    9: ($spacer * 2.25),
    10: ($spacer * 2.5)
), $spacers);
```

{% endcode %}

{% hint style="info" %}
You can add extra classes here by extending this array. Or there is another place where you can add more classes and that is `src / scss / core/ globals / _margin.scss` or can create your own custom file and import that.
{% endhint %}


# Theme Customization

How to customize an existing theme of Drift Angular

All the layouts have the pre-generated CSS files at the following path:

```
src / assets / css / {layout} / {theme_name}.css
src / assets / css / {layout} / {theme_name}.min.css
```

#### Customizing SCSS Files

The SCSS files are organized in two folders mentioned below:

* core/
* layouts/

The **core/** folder contains sub-folders which further contains all the SCSS styling code which is common for all the layouts. So, if you are interested in changing the global styling, you can customize the SCSS files given inside the **core/** folder at the following path:

```css
src / scss / core / 
```

The **layouts/** folder contains all the layouts by default. Now, for your project specific, you can choose the layout which fits into your need and can remove all the rest layouts.

Then inside this specific layout, you can find all the SCSS files available for the customization. Here is a path structure to access these layout specific files:

```css
src / scss / layouts / {layout} /
```

#### Generate CSS files after customization

In order to generate the CSS files after the customization done in SCSS. You need to run the following Gulp commands:

```css
$ gulp style-{layout}-{theme_name}

/* For example: $ gulp style-crm-main */
```

To generate a minified version, use the following command

```css
$ gulp min-style-{layout}-{theme_name}

/* For example: $ gulp style-crm-main */
```


# RTL Version

Setup the right-to-left version

All the layouts have the pre-generated RTL CSS files at the following path:

```
src / assets / css / {layout} / {theme_name}-rtl.css
src / assets / css / {layout} / {theme_name}-rtl.min.css
```

To customize the styling in SCSS, follow the topic [Theme Customization](/stylesheets/theme-customization) and then to generate the RTL version, follow the instructions given in the below section.

#### Generate RTL files after customization

In order to generate the RTL files after the customization done in SCSS. You need to run the following Gulp commands:

```css
$ gulp style-rtl-{layout}-{theme_name}

/* For example: $ gulp style-rtl-crm-main */
```

To generate a minified version, use the following command

```css
$ gulp min-style-rtl-{layout}-{theme_name}

/* For example: $ gulp style-rtl-crm-main */
```


# Template Setting

This section explains the settings within a specific layout. Because each layout varies from other, these setting options do also vary.

To change the template setting for a layout, you need to go to:

`src / app / layouts / {select-specific-layout} /`

And then open the file “layout.config.ts”

In this file, you can see all the available settings for that specific layout and can make your required changes here.


# Customize Horizontal Menu

Add, Edit and Delete a Horizontal Menu

The horizontal menu bar is only available for “listing” and “saas” layouts. To customize the horizontal menu for these two layouts you would need to go to:

`src / app / layouts / {listing or saas} / navigation / header-menu.model.ts`

In this model file, you can change the json object to customize the menu items.

There are four type in Horizontal Menu

1. Group
2. Mega
3. Collapse
4. Item

### Group

```javascript
{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'group',
    icon: 'icon of the menu',
    children: [..submenu items..]
}
```

### Mega

```javascript
{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'mega',
    icon: 'icon of the menu',
    children: [item1, item4, item3, item4]
}
```

In Mega Menu support max four childers that must be collaple and item types.

### Collapse

```javascript
{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'collapse',
    icon: 'icon of the menu',
    children: [..submenu items..]
}
```

### Item

```javascript
{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'item',
    icon: 'icon of the menu',
    url: 'route url'
}
```


# Customize Vertical Menu

Add, Edit and Delete a Vertical Menu

To customize the vertical menu for layouts you would need to go to:

`src / app / layouts / {specific-layout} / navigation / navigation.model.ts`

In this model file, you can change the json object to customize the menu items.

There are three type in Vertical Menu

1. Group
2. Collapse
3. Item

### Group

```javascript
{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'group',
    icon: 'icon of the menu',
    children: [..submenu items..]
}
```

### Collapse

```javascript
{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'collapse',
    icon: 'icon of the menu',
    children: [..submenu items..]
}
```

### Item

```javascript
{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'item',
    icon: 'icon of the menu',
    url: 'route url'
}
```


# Create a Page

Create New Page Component

To add new page in your app, You have to create a new Page Component.&#x20;

To create a Angular component run the following command in the command prompt on Windows PC or terminal on Mac.

```
$ ng generate component {component path}

// or you can use the shorter cammand given below

$ ng g c {component path}
```

Above cammand will create a component on given path. It will create four files.&#x20;

For example we create a component 'home' then following files will be generated:

1. home.component.html
2. home.component.scss
3. home.component.spec.ts
4. home.component.ts

We can skip spec file add 3. home.component.spec.ts file using `--skipTests=true`

```
$ ng generate component --skipTests=true home
```

For more angular command [click](https://angular.io/cli/generate) here.


# Define Routes

In Angular, a **route** is an object (instance of [Route](https://angular.io/api/router/Route)) that provides information about which component maps to a specific path. A **path** is the fragment of a URL that determines where exactly is located the resource (or page) you want to access. You can get the path by taking off the domain name from the URL.

In Angular you can define a route using route configurations or instances of the [Route](https://angular.io/api/router/Route) interface.

A collection of routes defines the router configuration which is an instance of [Routes](https://angular.io/api/router/Routes).

Each route can have the following properties:

* `path` is a string that specifies the path of the route.
* [`pathMatch`](https://angular.io/api/router/Route#pathMatch) is a string that specifies the matching strategy. It can take `prefix` (default) or [`full`](https://angular.io/api/core/Version#full).
* `component` is a component type that specifies the component that should be mapped to the route.
* [`redirectTo`](https://angular.io/api/router/Route#redirectTo) is the URL fragment which you will be redirected to if a route is matched.
* [`canActivate`](https://angular.io/api/router/Route#canActivate)determine if the current user is allowed to activate the component. By default, any user can activate.

These are the commonly used properties of routes but there are many others. You can find the rest of properties from the [official docs](https://angular.io/api/router/Routes#description).

For example, this is the definition of a route that maps the `/dashboards/main/` path to the `HomeComponent` component:

```
{ path: 'dashboards/main/', component: HomeComponent }
```

The path can be the empty string which usually refers to the main URL of your application or can be also a **wildcard** string (`**`) which will be matched by the router if the visited URL doesn’t match any paths in the router configuration. This is usually used to display a **page doesn’t exist** message or redirect the users to an existing path.


# Root Loader

Loader is showing before loading template.

Root loader is showing before template load. To update go to following path

```bash
src / index.html
```


# RTL

Right-to-Left (RTL)

### Overview

Drift Angular provides a seprate configured template for RTL support. `skeleton-rtl`

### Generate RTL CSS

To generate RTL css run the command to install Gulp dependencies.

```
$ npm install
```

Compile the scss by running the following command:

```
$ gulp
```

### RTL attributes

Open the Angular index.html file from `src/index.html`. Add the RTL attributes to the HTML tag.

```markup
<html lang="en" direction="rtl" dir="rtl" style="direction: rtl">
```

### Link RTL Css

Open the Angular index.html file from `src/index.html`. link the RTL css before head tag close `</head>`&#x20;

```markup
<link rel="stylesheet" href="assets/css/default/theme-semidark-rtl.min.css">
```


# Internationalization

### Overview

The internationalization (i18n) library for Angular by [ngx-translate](https://github.com/ngx-translate/core)

### How to add a new language

To register new language we have to update given below files:

* `src/assets/i18n/*.json`
* `src/app/app.component.ts`

Duplicate en.json file and create a new language file in `src/assets/i18n/*.json`.  The new file name and the language name must be matched.

Register the language by adding its name to languages array.

```typescript
translate.addLangs(['en', 'es', 'new lang name']);
```

### How to use

The translator understands nested JSON objects as defined in `src/assets/i18n/*.json`. This means that you can have a translation that looks like this:

{ "HOME": { "HELLO": "hello " } }

You can then access the value by using the dot notation, in this case `HOME.HELLO`.

```markup
<div [translate]="'HOME.HELLO'" [translateParams]="{value: 'world'}"></div>
```


# Alerts

To use Alerts, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Alert

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCBmbIV0P-1JRgHITo%2F-LuBwcgLqldIfW-PKVLF%2Fbasic-alerts.png?alt=media\&token=91faf09d-d854-442f-9d36-f714de9de691)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-alert type="warning" [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>

```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component, Input} from '@angular/core';

@Component({
  selector: 'ngbd-alert-basic',
  templateUrl: './alert-basic.html'
})
export class NgbdAlertBasic {}

```

{% endtab %}
{% endtabs %}

&#x20;Bootstrap provides styles for the following types: `'success'`, `'info'`, `'warning'`, `'danger'`, `'primary'`, `'secondary'`, `'light'` and `'dark'`

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/alert/api)

### Closable Alert

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCVxzPEHIsgwmDAEIj%2F-LuBwcgMmfTrIT69z4WI%2Fcloseable-alert.png?alt=media\&token=53bb43ee-c248-49d2-8d9b-0a8473f78d26)
{% endtab %}

{% tab title="HTML" %}

```markup
<ng-container *ngFor="let alert of alerts">
  <ngb-alert [type]="alert.type" (close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>
</ng-container>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { Input, Component } from '@angular/core';

@Component({
  selector: 'ngbd-alert-closeable',
  templateUrl: './alert-closeable.html'
})
export class NgbdAlertCloseable {

  @Input()
  public alerts: Array<IAlert> = [];

  constructor() {
    this.alerts.push({
      id: 5,
      type: 'primary',
      message: 'This is a primary alert',
    }, {
      id: 6,
      type: 'secondary',
      message: 'This is a secondary alert',
    }, {
      id: 1,
      type: 'success',
      message: 'This is a success alert',
    }, {
      id: 4,
      type: 'danger',
      message: 'This is a danger alert',
    }, {
      id: 3,
      type: 'warning',
      message: 'This is a warning alert',
    }, {
      id: 2,
      type: 'info',
      message: 'This is an info alert',
    }, {
      id: 7,
      type: 'light',
      message: 'This is a light alert',
    }, {
      id: 8,
      type: 'dark',
      message: 'This is a dark alert',
    });
  }

  public closeAlert(alert: IAlert) {
    const index: number = this.alerts.indexOf(alert);
    this.alerts.splice(index, 1);
  }
}

export interface IAlert {
  id: number;
  type: string;
  message: string;
}

```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/alert/api)

### Alert With Link

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCuGtZyhgOUqoz4UWp%2F-LuD-QgtdeU6WMaOb7EL%2Falert-with-link.png?alt=media\&token=ec78660e-8554-4cba-aeee-2c06653ccda0)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-alert type="dark" [dismissible]="true">
    A simple alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it
    a click if you like.
</ngb-alert>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component, Input} from '@angular/core';

@Component({
  selector: 'ngbd-link-color',
  templateUrl: './link-color.component.html'
})
export class LinkColorComponent  {}
```

{% endtab %}
{% endtabs %}

### Custom Alert

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCVxzPEHIsgwmDAEIj%2F-LuBvCCHVMc8npoP0P_W%2Fcustom-alerts.png?alt=media\&token=bd2ee135-1e47-4c6b-8493-82f73dce17c3)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-alert-custom',
  templateUrl: './alert-custom.html',
  styles: [`
    :host >>> .alert-custom {
      color: #99004d;
      background-color: #f169b4;
      border-color: #800040;
    }
  `]
})
export class NgbdAlertCustom {}
```

{% endtab %}
{% endtabs %}


# Badges

To use Badges, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Default Badges

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuL7ItaqT_4tJRI5rK0%2F-LuL81AOU9B1RziNe6DP%2Fbadges.png?alt=media\&token=84e691a0-1430-4b0c-9a78-e86d064ec8bf)
{% endtab %}

{% tab title="HTML" %}

#### By Component

```markup
<gx-badge class="mb-2 mr-2" type="primary">Primary</gx-badge>
<gx-badge class="mb-2 mr-2" type="secondary">Secondary</gx-badge>
<gx-badge class="mb-2 mr-2" type="success">Success</gx-badge>
```

#### By Directive

```markup
<span class="mb-2 mr-2" gxBadge="primary">Primary</span>
<span class="mb-2 mr-2" gxBadge="secondary">Secondary</span>
<span class="mb-2 mr-2" gxBadge="success">Success</span>
```

{% endtab %}
{% endtabs %}

### Link Badges

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuL7ItaqT_4tJRI5rK0%2F-LuL81AOU9B1RziNe6DP%2Fbadges.png?alt=media\&token=84e691a0-1430-4b0c-9a78-e86d064ec8bf)
{% endtab %}

{% tab title="HTML" %}

```markup
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="primary">Primary</a>
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="secondary">Secondary</a>
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="success">Success</a>
```

{% endtab %}
{% endtabs %}

### Pill Badges

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuL8WFayZ3vcEIBMJGm%2F-LuL9-RF5kBzaf7VMEho%2Fpill-badges.png?alt=media\&token=773d7731-187c-45d5-8e3f-97e4e9977b0f)
{% endtab %}

{% tab title="HTML" %}

```markup
<gx-badge class="mb-2 mr-2" type="primary" pill>Primary</gx-badge>
<gx-badge class="mb-2 mr-2" type="secondary" pill>Secondary</gx-badge>
<gx-badge class="mb-2 mr-2" type="success" pill>Success</gx-badge>
```

{% endtab %}
{% endtabs %}


# Breadcrumbs

To use Breadcrumbs, first import `SharedModule`in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Breadcrumb with List

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuM2h2ckR6miwdzb2CY%2F-LuMqk-3goWZkvMZy85f%2Fbreadcrumbs.png?alt=media\&token=db31aba2-7eb9-496c-8a78-52a7f12a4e43)
{% endtab %}

{% tab title="HTML" %}

```markup
<gx-breadcrumbs [data]="breadcrumb"></gx-breadcrumbs>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { Component} from '@angular/core';

@Component({
  selector: 'app-bs-breadcrumb',
  templateUrl: './bs-breadcrumb.component.html'
})
export class BsBreadcrumbComponent {
  breadcrumb = [
    {label: 'Home'}, 
    {label: 'Library'}, 
    {label: 'Data', active: true}
  ];

  constructor() { }

}
```

{% endtab %}
{% endtabs %}

### Breadcrumb with Nav

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuM2h2ckR6miwdzb2CY%2F-LuMqk-3goWZkvMZy85f%2Fbreadcrumbs.png?alt=media\&token=db31aba2-7eb9-496c-8a78-52a7f12a4e43)
{% endtab %}

{% tab title="HTML" %}

```markup
<gx-breadcrumbs displayAs="nav" [data]="breadcrumb"></gx-breadcrumbs>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { Component} from '@angular/core';

@Component({
  selector: 'app-bs-breadcrumb',
  templateUrl: './bs-breadcrumb.component.html'
})
export class BsBreadcrumbComponent {
  breadcrumb = [
    {label: 'Home'}, 
    {label: 'Library'}, 
    {label: 'Data', active: true}
  ];

  constructor() { }

}
```

{% endtab %}
{% endtabs %}


# Buttons

To use Buttons, first import `SharedModule`in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Default Buttons

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuMwd_mKa59uRIzpOwh%2F-LuNHuYx7xeJc_LZTBSS%2Fbuttons.png?alt=media\&token=395d966e-674b-4f8a-8763-cf45b34f6d51)
{% endtab %}

{% tab title="HTML" %}

```markup
<button type="button" class="btn btn-primary mr-2 mb-2">Primary</button>
<button type="button" class="btn btn-secondary mr-2 mb-2">Secondary</button>
<button type="button" class="btn btn-success mr-2 mb-2">Success</button>
<button type="button" class="btn btn-danger mr-2 mb-2">Danger</button>
<button type="button" class="btn btn-warning mr-2 mb-2">Warning</button>
<button type="button" class="btn btn-info mr-2 mb-2">Info</button>
<button type="button" class="btn btn-light mr-2 mb-2">Light</button>
<button type="button" class="btn btn-dark mr-2 mb-2">Dark</button>
<button type="button" class="btn btn-link mb-2">Link</button>
```

{% endtab %}
{% endtabs %}

### Button Tags

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNHzZ4Q9C12ZosOj-X%2F-LuNOMHcMac0XJThUHmt%2Fbuttons-tags.png?alt=media\&token=a16cea60-8a89-4306-a9ef-9d3fac62770b)
{% endtab %}

{% tab title="HTML" %}

```markup
<a class="btn btn-primary mr-2 mb-2" href="javascript:void(0)" role="button">Link</a>
<button class="btn btn-primary mr-2 mb-2" type="submit">Button</button>
<input class="btn btn-primary mr-2 mb-2" type="button" value="Input">
<input class="btn btn-primary mr-2 mb-2" type="submit" value="Submit">
<input class="btn btn-primary mb-2" type="reset" value="Reset">
```

{% endtab %}
{% endtabs %}

### Sizes button

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNOeQlExD7laMKl_zK%2F-LuNPKpoLtgt3vcQR2Ql%2Fbuttons-sizes.png?alt=media\&token=261e6608-a865-4d73-b94b-7ab6c462a45a)
{% endtab %}

{% tab title="HTML" %}

```markup
<button type="button" class="btn btn-primary btn-lg mr-2">Large button</button>
<button type="button" class="btn btn-primary mr-2">Default button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
```

{% endtab %}
{% endtabs %}

### Outlines Buttons

{% tabs %}
{% tab title="First Tab" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNOeQlExD7laMKl_zK%2F-LuNPKpn-yoSiXEhoOs7%2Fbuttons-outlines.png?alt=media\&token=44ebb8a6-21a7-4b9d-9f4a-8cc495cae8c3)
{% endtab %}

{% tab title="HTML" %}

```markup
<button type="button" class="btn btn-outline-primary mr-2 mb-2">Primary</button>
<button type="button" class="btn btn-outline-secondary mr-2 mb-2">Secondary</button>
<button type="button" class="btn btn-outline-success mb-2">Success</button>
```

{% endtab %}
{% endtabs %}

### Block Buttons

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNOeQlExD7laMKl_zK%2F-LuNPKpuUKrf8FcnNZC4%2Fbuttons-blocks.png?alt=media\&token=bd43496e-52c5-4f0f-ae5b-7407c5e16bf5)
{% endtab %}

{% tab title="HTML" %}

```markup
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
```

{% endtab %}
{% endtabs %}

### Buttons States

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNOeQlExD7laMKl_zK%2F-LuNPKptvkVo4PQ1e3vt%2Fbuttons-states.png?alt=media\&token=b0183bb5-6659-4b48-b34c-6b9a71de7e36)
{% endtab %}

{% tab title="HTML" %}

```markup
<h5 class="text-muted">Active State Buttons</h5>
<div class="mb-5">
  <button type="button" class="btn btn-primary active mr-2 mb-2">Primary button</button>
  <button type="button" class="btn btn-secondary active mr-2 mb-2">Button</button>
  <a href="javascript:void(0)" class="btn btn-primary active mr-2 mb-2" role="button" aria-pressed="true">Primary
    link</a>
  <a href="javascript:void(0)" class="btn btn-secondary active mb-2" role="button"
     aria-pressed="true">Link</a>
</div>

<h5 class="text-muted">Disabled State Buttons</h5>
<div class="mb-0">
  <button type="button" class="btn btn-primary mr-2 mb-2" disabled>Primary button</button>
  <button type="button" class="btn btn-secondary mr-2 mb-2" disabled>Button</button>
  <a href="javascript:void(0)" class="btn btn-primary mr-2 mb-2 disabled" tabindex="-1" role="button"
     aria-disabled="true">Primary link</a>
  <a href="javascript:void(0)" class="btn btn-secondary mb-2 disabled" tabindex="-1" role="button"
     aria-disabled="true">Link</a>
</div>
```

{% endtab %}
{% endtabs %}

### Toggle states

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNOeQlExD7laMKl_zK%2F-LuNPKpswvX2swW7_1jI%2Fbuttons-toggle-states.png?alt=media\&token=31d4722e-8389-4f7f-b646-bc1f3455836c)
{% endtab %}

{% tab title="HTML" %}

```markup
<button type="button" class="btn btn-primary mr-2 mb-2" [ngClass]="{active:toggle_btn_primary}"
        (click)="togglePrimaryButton()" aria-pressed="false"
        autocomplete="off">
  Single toggle
</button>

<button type="button" class="btn btn-outline-secondary mb-2" [ngClass]="{active:toggle_btn_secondary}"
        (click)="toggleSecondaryButton()" aria-pressed="false"
        autocomplete="off">
  Single toggle
</button>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-buttons',
  templateUrl: './buttons.component.html'
})
export class NgbdButtons {
  toggle_btn_primary: boolean = true;
  toggle_btn_secondary: boolean = false;

  togglePrimaryButton() {
    this.toggle_btn_primary = !this.toggle_btn_primary;
  }

  toggleSecondaryButton() {
    this.toggle_btn_secondary = !this.toggle_btn_secondary;
  }
}

```

{% endtab %}
{% endtabs %}

### Checkbox buttons

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNOeQlExD7laMKl_zK%2F-LuNPKpp4pviY0EDVG8i%2Fbuttons-checkboxes.png?alt=media\&token=27aa73d3-7b2b-4da5-80c4-267296d77c31)
{% endtab %}

{% tab title="HTML" %}

```markup
<h5 class="text-muted">Checkbox Buttons Example</h5>

<div class="example-row mb-2">
  <span class="btn-group-toggle mr-2">
    <label class="btn btn-secondary active" ngbButtonLabel>
      <input type="checkbox" ngbButton [(ngModel)]="model.button1"> {{(model.button1)? 'Checked' : 'Unchecked'}}
    </label>
  </span>

  <span class="btn-group-toggle">
    <label class="btn btn-outline-primary" ngbButtonLabel>
      <input type="checkbox" ngbButton [(ngModel)]="model.button2"> {{(model.button2)? 'Checked' : 'Unchecked'}}
    </label>
  </span>
</div>

<h5 class="text-muted">Checkbox Button Group Example</h5>

<div class="example-row mb-2">
  <div class="btn-group btn-group-toggle">
    <label class="btn-primary" ngbButtonLabel>
      <input type="checkbox" ngbButton [(ngModel)]="model.left"> {{(model.left) ? 'Checked' : 'Left'}}
    </label>
    <label class="btn-primary" ngbButtonLabel>
      <input type="checkbox" ngbButton [(ngModel)]="model.middle"> {{(model.middle) ? 'Checked' : 'Middle'}}
    </label>
    <label class="btn-primary" ngbButtonLabel>
      <input type="checkbox" ngbButton [(ngModel)]="model.right"> {{(model.right) ? 'Checked' : 'Right'}}
    </label>
  </div>
</div>

```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-ngbd-buttons-checkbox',
  templateUrl: './buttons-checkbox.html'
})
export class NgbdButtonsCheckbox {
  model = {
    button1: true,
    button2: false,
    left: true,
    middle: false,
    right: false
  };
}

```

{% endtab %}
{% endtabs %}

### Radio buttons

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuNOeQlExD7laMKl_zK%2F-LuNPKpqCdiCrvL34INL%2Fbuttons-radio.png?alt=media\&token=6eb09e6f-fd99-4fd6-b504-e2ed8ff8a961)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group btn-group-toggle mr-2 mb-2" ngbRadioGroup name="radioBasic" [(ngModel)]="option1">
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="1"> {{(option1 == 1)? 'Active' : 'Left'}}
  </label>
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" value="middle"> {{(option1 == 'middle')? 'Active' : 'Middle'}}
  </label>
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="false"> {{(!option1)? 'Active' : 'Right'}}
  </label>
</div>

<div class="btn-group btn-group-toggle mb-2" ngbRadioGroup name="radio_option2" [(ngModel)]="option2">
  <label class="btn btn-outline-secondary" ngbButtonLabel>
    <input type="radio" ngbButton value="left"> {{(option2 == 'left')? 'Active' : 'Radio'}}
  </label>
  <label class="btn btn-outline-secondary" ngbButtonLabel>
    <input type="radio" ngbButton value="middle"> {{(option2 == 'middle')? 'Active' : 'Radio'}}
  </label>
  <label class="btn btn-outline-secondary" ngbButtonLabel>
    <input type="radio" ngbButton value="right"> {{(option2 == 'right')? 'Active' : 'Radio'}}
  </label>
</div>


```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-ngbd-buttons-radio',
  templateUrl: './buttons-radio.html'
})
export class NgbdButtonsRadio {
  option1: any = 1;
  option2: string = 'right';
}

```

{% endtab %}
{% endtabs %}


# Button Group

To use Button Group, first import `SharedModule`in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Button Group

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOta_qCSHmjZO35j8Z%2F-LuOvieB1MJXbZ4G85bt%2Fbutton-group.png?alt=media\&token=a48f5e24-e133-4bba-8521-f02441fa220e)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group mr-2 mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOvsyRRzBgwHf70ZqB%2F-LuOvxLvPjbk3uUvgtID%2Fbutton-group-vertical.png?alt=media\&token=7636ddc4-a756-4737-b597-ff6dbf9f988f)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group-vertical mr-2 mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>

<div class="btn-group-vertical mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>
```

{% endtab %}
{% endtabs %}

### Toolbar Button Group

{% tabs %}
{% tab title="Example 1" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOwSydDTvzCIumYzWV%2F-LuOxA8KQT9GUsOFzrmc%2Fbutton-group-toolbar.png?alt=media\&token=07b9333b-13d7-4e20-9670-037bbfb49c07)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group mr-2 mb-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
  <div class="btn-group mb-2" role="group" aria-label="Third group">
    <button type="button" class="btn btn-primary">8</button>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 2" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOwSydDTvzCIumYzWV%2F-LuOxFFNs_5D-i690XsS%2Fbutton-group-toolbar-2.png?alt=media\&token=93bb3121-b9fb-4a5d-9ec3-d04fe01eb5dd)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example"
           aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 3" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOwSydDTvzCIumYzWV%2F-LuOxJ6R8H3_--sr-R34%2Fbutton-group-toolbar-3.png?alt=media\&token=f82b1b10-b63b-4248-8457-49b7759eb10c)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-toolbar justify-content-between" role="toolbar">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example"
           aria-label="Input group example"
           aria-describedby="btnGroupAddon2">
  </div>
</div>
```

{% endtab %}
{% endtabs %}

### Button Group sizing

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOyw5Ln-jL6t-R9mHl%2F-LuP0nOKEb2T0Wtid92C%2Fbutton-group-sizing.png?alt=media\&token=ee141780-9eaa-4bec-bdce-806f10b93c62)
{% endtab %}

{% tab title="HTML" %}

```markup
<div>
  <div class="btn-group btn-group-lg mr-2 mb-2" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>

<div>
  <div class="btn-group mr-2 mb-2" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>

<div>
  <div class="btn-group btn-group-sm mr-2 mb-2" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group sizing

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOyw5Ln-jL6t-R9mHl%2F-LuP-fkDruXS14HppClf%2Fbutton-group-sizing-vertical.png?alt=media\&token=2aaf4427-df7c-4cfa-8158-cafc5f0ae1fd)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group-vertical btn-group-lg mr-2 mb-2" role="group">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>

<div class="btn-group-vertical mr-2 mb-2" role="group">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>

<div class="btn-group-vertical btn-group-sm mb-2" role="group">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>
```

{% endtab %}
{% endtabs %}

### Nesting Button Group

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOyw5Ln-jL6t-R9mHl%2F-LuP05eOgwZu-McgHgf_%2Fbutton-group-nesting.png?alt=media\&token=0f097321-ad61-46e2-bbb4-3fddbaabd466)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group mr-2 mb-2" role="group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop1" type="button" class="btn btn-primary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Nesting Button Group

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuOyw5Ln-jL6t-R9mHl%2F-LuP00loK9D4geKWDYHW%2Fbutton-group-nesting-vertical.png?alt=media\&token=4fe99274-112d-4d04-938b-8946c868a22e)
{% endtab %}

{% tab title="Second Tab" %}

```markup
<div class="btn-group-vertical mb-2" role="group">
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <button type="button" class="btn btn-outline-secondary">Button</button>

  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop6" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop6">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop7" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop7">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop8" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop8">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
</div>
```

{% endtab %}
{% endtabs %}


# Cards

To use Card, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Card

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXImIpsC3UdawiD%2Fexample-1.png?alt=media\&token=f167b29e-b6f1-409d-926b-c9d55f99fbe7)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Card title" card-img-top="assets/images/card/skateboard.jpeg">
  <!-- Card Text-->
  <p class="card-text">
    Some quick example text to build on the
    card title and make up the bulk of the
    card's content.
  </p>
  <!-- /card text-->

  <!-- Card Button-->
  <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
  <!-- /card button-->
</bs-card>
```

{% endtab %}
{% endtabs %}

### Card With Body Only

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXTfbU5CslUW2qs%2Fexample-2.png?alt=media\&token=069ff827-32cc-44ea-bdda-14c8d405a4dc)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card>

  <!-- Card Text-->
  <p class="card-text">
    This is some text within a card body. Use
    it wisely :)
  </p>
  <!-- /card text-->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Titles & Links

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXQI_cuxsvcslVt%2Fexample-3.png?alt=media\&token=40a49047-2499-4c2e-a80d-660b8ba7e47f)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Titles & Links">

  <h4 class="card-subtitle">Subtitle text</h4>

  <!-- Card Text-->
  <p class="card-text">
    Some quick example text to build on the
    card title and make up the bulk of the
    card's content.
  </p>
  <!-- /card text-->

  <!-- Card Link-->
  <a href="javascript:void(0)" class="card-link">Goto Link</a>
  <a href="javascript:void(0)" class="card-link">Another Link</a>
  <!-- /card link-->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card With List Group

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXR2KiH9p-VO6Dn%2Fexample-4.png?alt=media\&token=4eab9ac9-e7e0-4365-b74c-58927ede11ae)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Kitchen Sink" card-img-top="assets/images/card/vegetable.jpeg">

  <!-- Card Text-->
  <p class="card-text lead">
    Mix and match multiple content types
    to create the card you need, or throw
    everything in there.
  </p>

  <p class="card-text">
    Some quick example text to build on the
    card title and make up the bulk of the
    card's content.
  </p>
  <!-- /card text-->

  <bs-card-outer-body>
    <!-- List Group -->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <!-- /list group-->
  </bs-card-outer-body>

  <bs-card-body>
    <!-- Card Body -->

    <!-- Card Button-->
    <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
    <a href="javascript:void(0)" class="card-link">Card Link</a>
    <!-- /card button-->


    <!-- /card body -->
  </bs-card-body>

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card With Tabs

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXO4hCTrsNjXuYb%2Fexample-6.png?alt=media\&token=6ca26feb-3d6c-4ffe-9126-cd54d7796ca0)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card [hasBody]="false">

  <!-- Card header -->
  <bs-card-header class="card-nav">
    <ul class="card-header-tabs nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardTab === 1}" href="#tab-pane1" (click)="onClickTab($event, 1)">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardTab === 2}" data-toggle="tab" href="#tab-pane2"
           (click)="onClickTab($event, 2)">Link</a>
      </li>
      <li class="nav-item">
        <a href="#tab-pane3" [ngClass]="{active:cardTab === 3}" class="nav-link disabled"
           (click)="$event.preventDefault()">Disabled</a>
      </li>
    </ul>
  </bs-card-header>
  <!-- /card header -->

  <!-- Tab Content-->
  <bs-card-outer-body class="tab-content">

    <!-- Tab panel -->
    <div [ngClass]="{active:cardTab === 1}" class="tab-pane">

      <!-- Card Body -->
      <bs-card-body card-title="Card With Tabs">

        <!-- Card Text-->
        <p class="card-text">
          Some quick example text to build on the
          card title and make up the bulk of the
          card's content.
        </p>
        <!-- /card text-->

        <!-- Card Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <!-- /card link-->

      </bs-card-body>
      <!-- /card body -->

    </div>
    <!-- /tab panel -->

    <!-- Tab panel -->
    <div [ngClass]="{active:cardTab === 2}" class="tab-pane">

      <!-- Card Body -->
      <bs-card-body card-title="Card With Tabs">

        <!-- Card Text-->
        <p class="card-text">
          Mix and match multiple content types to create the card you need, or throw everything in there.
        </p>
        <!-- /card text-->

        <!-- Card Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <!-- /card link-->

      </bs-card-body>
      <!-- /card body -->

    </div>
    <!-- /tab panel -->

    <!-- Tab panel -->
    <div [ngClass]="{active:cardTab === 3}" class="tab-pane">

      <!-- Card Body -->
      <bs-card-body card-title="Card With Tabs">

        <!-- Card Text-->
        <p class="card-text">
          Some quick example text to build on the
          card title and make up the bulk of the
          card's content.
        </p>
        <!-- /card text-->

        <!-- Card Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <!-- /card link-->

      </bs-card-body>
      <!-- /card body -->

    </div>
    <!-- /tab panel -->

  </bs-card-outer-body>
  <!-- /tab content-->

</bs-card>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-bs-card',
  templateUrl: './bs-card.component.html',
  styleUrls: ['./bs-card.component.scss']
})
export class BsCardComponent {
  cardTab = 1;

  constructor() {}

  onClickTab(event, tab) {
    event.preventDefault();

    this.cardTab = tab;
  }
}

```

{% endtab %}
{% endtabs %}

### Tabs In Button Style

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXS9iSoRxfM5AtX%2Fexample-5.png?alt=media\&token=5d999718-d0fd-4cc8-9abf-346ab3b5b5ba)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card [hasBody]="false">

  <!-- Card header -->
  <bs-card-header>
    <ul class="card-header-pills nav nav-pills" role="tablist">
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardPillsTab === 1}" href="#tab-pane4"
           (click)="onClickPillosTab($event, 1)">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{active:cardPillsTab === 2}" href="#tab-pane5"
           (click)="onClickPillosTab($event, 2)">Link</a>
      </li>
      <li class="nav-item" [ngClass]="{active:cardPillsTab === 3}">
        <a href="#tab-pane6" (click)="$event.preventDefault()" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </bs-card-header>
  <!-- /card header -->

  <bs-card-outer-body>
    <!-- Tab Content-->
    <div class="tab-content">

      <!-- Tab panel -->
      <div class="tab-pane" [ngClass]="{active:cardPillsTab === 1}">

        <!-- Card Body -->
        <bs-card-body card-title="Tabs In Button Style">

          <!-- Card Text-->
          <p class="card-text">
            Mix and match multiple content types to create the card you need, or throw everything in there.
          </p>
          <!-- /card text-->

          <!-- Card Link-->
          <a href="javascript:void(0)" class="card-link">Goto Link</a>
          <!-- /card link-->

        </bs-card-body>
        <!-- /card body -->

      </div>
      <!-- /tab panel -->

      <!-- Tab panel -->
      <div class="tab-pane" [ngClass]="{active:cardPillsTab === 2}">

        <!-- Card Body -->
        <bs-card-body card-title="Tabs In Button Style">

          <!-- Card Text-->
          <p class="card-text">
            Some quick example text to build on the
            card title and make up the bulk of the
            card's content.
          </p>
          <!-- /card text-->

          <!-- Card Link-->
          <a href="javascript:void(0)" class="card-link">Goto Link</a>
          <!-- /card link-->

        </bs-card-body>
        <!-- /card body -->

      </div>
      <!-- /tab panel -->

      <!-- Tab panel -->
      <div class="tab-pane" [ngClass]="{active:cardPillsTab === 3}">

        <!-- Card Body -->
        <bs-card-body card-title="Tabs In Button Style">

          <!-- Card Text-->
          <p class="card-text">
            Some quick example text to build on the
            card title and make up the bulk of the
            card's content.
          </p>
          <!-- /card text-->

          <!-- Card Link-->
          <a href="javascript:void(0)" class="card-link">Goto Link</a>
          <!-- /card link-->

        </bs-card-body>
        <!-- /card body -->

      </div>
      <!-- /tab panel -->

    </div>
    <!-- /tab content-->

  </bs-card-outer-body>

</bs-card>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-bs-card',
  templateUrl: './bs-card.component.html',
  styleUrls: ['./bs-card.component.scss']
})
export class BsCardComponent {
  cardPillsTab = 1;

  constructor() {}

  onClickPillosTab(event, tab) {
    event.preventDefault();

    this.cardPillsTab = tab;
  }
}

```

{% endtab %}
{% endtabs %}

### Card With Header & Footer&#x20;

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuJINgdhhGGhq2u0RXX%2F-LuJJlSYrRwhi8g_oxbl%2Fcard-herader-footer.png?alt=media\&token=aefb47e1-bd8b-4f09-bd5e-03eaee6f1d60)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Header & Footer">

  <!-- Card Header -->
  <bs-card-header class="h4">Left Aligned Card</bs-card-header>
  <!-- /card header -->

  <!-- Card Body -->

  <!-- Card Text-->
  <p class="card-text">
    Some quick example text to build on the
    card title and make up the bulk of the
    card's content.
  </p>
  <!-- /card text-->

  <!-- Card Button-->
  <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
  <!-- /card button-->

  <!-- /card body -->

  <!-- Card Footer -->
  <bs-card-footer class="text-muted">2 days ago | footer content</bs-card-footer>
  <!-- /card footer -->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card Background Style

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXP8Ku9SoviWPQQ%2Fexample-8.png?alt=media\&token=c8f4f098-9815-4ae2-8d16-4656e9b0ce9f)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card class="text-white bg-primary">

  <!-- Card Header -->
  <bs-card-header class="h4 text-white">Header</bs-card-header>
  <!-- /card header -->

  <!-- Card Title-->
  <h2 class="card-title text-white">Header & Footer</h2>
  <!-- Card Title-->

  <!-- Card Text-->
  <p class="card-text">
    Some quick example text to build on the
    card title and make up the bulk of the
    card's content.
  </p>
  <!-- /card text-->

  <!-- Card Footer -->
  <bs-card-footer>2 days ago | footer content</bs-card-footer>
  <!-- /card footer -->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card Image Overlay

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXMF1TEuvdCXI7u%2Fexample-7.png?alt=media\&token=7b798581-2ee7-46a7-a62d-23d4f7a9d85c)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-img="assets/images/card/person-walking.jpeg" class="text-white">

  <!-- Card Overlay -->
  <bs-card-img-overlay>

    <h2 class="card-title text-white">Card title</h2>

    <!-- Card Text -->
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in to additional content.
      This content is a little bit longer.
    </p>
    <p class="card-text">Last updated 3 mins ago</p>
    <!-- /card text -->

  </bs-card-img-overlay>
  <!-- /card overlay -->

</bs-card>
```

{% endtab %}
{% endtabs %}

### Card Border Style

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuJTQUTtq1ehpWkkpdL%2F-LuJTgTU7L-zJ0G7F8DX%2Fcard-border-style.png?alt=media\&token=dc0980e6-c080-4f14-b687-7508e23d9b51)
{% endtab %}

{% tab title="HTML" %}

```markup
<bs-card card-title="Header & Footer" class="border border-primary">

  <!-- Card Header -->
  <bs-card-header class="h4 border-bottom border-primary">Header</bs-card-header>
  <!-- /card header -->

  <!-- Card Text-->
  <p class="card-text">
    Some quick example text to build on the
    card title and make up the bulk of the
    card's content.
  </p>
  <!-- /card text-->

  <!-- Card Footer -->
  <bs-card-footer class="border-top border-primary">2 days ago | footer content</bs-card-footer>
  <!-- /card footer -->

</bs-card>
```

{% endtab %}
{% endtabs %}


# Card Group

To use Card Group, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Card Groups

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuFooMwGKeJsytF8x0B%2F-LuFpo5cOf0Qym8BBo_3%2Fcg-example-1.png?alt=media\&token=39f4a84e-7929-4e63-81f2-11087bf77d77)
{% endtab %}

{% tab title="Html" %}

```markup
<!-- Card Group -->
<div class="card-group mb-8">

  <!-- Card -->
  <bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/vegetable.jpeg', caption: 'Vegetable'}">
    <!-- Card Text-->
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in to additional content. This
      content
      is a little bit longer.
    </p>
    <!-- /card text-->

    <!-- Card Text-->
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
    <!-- /card text-->

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/plant.jpeg', caption: 'plant'}">

    <!-- Card Text-->
    <p class="card-text">
      Some quick example text to build on the
      card title and make up the bulk of the
      card's content.
    </p>
    <!-- /card text-->

    <!-- Card Text-->
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
    <!-- /card text-->

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/coffee-cookies.jpeg', caption: 'Coffee'}">
    
    <!-- Card Text-->
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in to additional content. This card
      has even longer content than the first to show that equal height action.
    </p>
    <!-- /card text-->

    <!-- Card Text-->
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
    <!-- /card text-->

  </bs-card>
  <!-- /card -->

</div>
<!-- /card group -->
```

{% endtab %}
{% endtabs %}

### Decks Card Groups

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXL7cn5lZgaXr_y%2Fcg-example-2.png?alt=media\&token=814d3774-491f-4cd2-8987-1749c6a3bfcf)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="card-deck mb-8">

  <!-- Card -->
  <bs-card card-title="Card Title"
           [card-img-top]="{url:'assets/images/card/asphalt-balancing.jpeg', caption: 'Balancing'}">

    <!-- Card Text-->
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in to additional content. This
      content
      is a little bit longer.
    </p>
    <!-- /card text-->

    <!-- Card Text-->
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
    <!-- /card text-->

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card card-title="Card Title" [card-img-top]="{url:'assets/images/card/sunset.jpeg', caption: 'sunset'}">

    <!-- Card Text-->
    <p class="card-text">
      Some quick example text to build on the
      card title and make up the bulk of the
      card's content.
    </p>
    <!-- /card text-->

    <!-- Card Text-->
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
    <!-- /card text-->

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card card-title="Card Title"
           [card-img-top]="{url:'assets/images/card/person-walking.jpeg', caption: 'Person'}">

    <!-- Card Text-->
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in to additional content. This card
      has even longer content than the first to show that equal height action.
    </p>
    <!-- /card text-->

    <!-- Card Text-->
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
    <!-- /card text-->

  </bs-card>
  <!-- /card -->

</div>
```

{% endtab %}
{% endtabs %}

### Card Columns

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuDBnQt55FM1-NPAaVz%2F-LuFoiXK4kvn0QoMFkoR%2Fcg-example-3.png?alt=media\&token=c436dad6-1c81-4775-a70d-341062d846fb)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="card-columns">

  <!-- Card -->
  <bs-card card-title="Card title that wraps to a new line"
           [card-img-top]="{url:'assets/images/card/painted-hand.jpeg', caption: 'Hand'}">

    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
      content. This content is a little bit longer.</p>

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card [hasBody]="false">

    <bs-card-outer-body>
      <!-- Blockquote -->
      <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          <small class="text-muted">
            Someone famous in <cite title="Source Title">Source Title</cite>
          </small>
        </footer>
      </blockquote>
      <!-- /blockquote -->
    </bs-card-outer-body>

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card card-title="Card title" [card-img-top]="{url:'assets/images/card/bottle.jpeg', caption: 'Bottle'}">
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card class="bg-primary text-center" [hasBody]="false">

    <!-- Card Body -->
    <bs-card-outer-body>
      <blockquote class="blockquote mb-0 text-white card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
        <footer class="blockquote-footer text-white">
          <small>
            Someone famous in <cite title="Source Title">Source Title</cite>
          </small>
        </footer>
      </blockquote>
    </bs-card-outer-body>
    <!-- /card body -->

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card card-title="Card title" class="text-center">
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card [hasBody]="false"
           [card-img]="{url:'assets/images/card/doughnut.jpeg', caption: 'Doughnut', classlist: 'card-img'}"></bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card class="text-right" [hasBody]="false">

    <!-- Card Body -->
    <bs-card-outer-body>
      <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          <small class="text-muted">
            Someone famous in <cite title="Source Title">Source Title</cite>
          </small>
        </footer>
      </blockquote>
    </bs-card-outer-body>
    <!-- /card body -->

  </bs-card>
  <!-- /card -->

  <!-- Card -->
  <bs-card card-title="Card title">
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
      content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text">
      <small class="text-muted">Last updated 3 mins ago</small>
    </p>
  </bs-card>
  <!-- /card -->

</div>
```

{% endtab %}
{% endtabs %}


# Collapse

To use Card, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Collapse

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuP3QYL7UX-ibYx_CSk%2F-LuP47TU-Su6IVZc8g0D%2Fcollapse.png?alt=media\&token=22e49a41-78b7-497a-895a-43a1f0c1e22d)
{% endtab %}

{% tab title="HTML" %}

```markup
<p>
  <button type="button" class="btn btn-outline-primary" [ngClass]="{active:!isCollapsed}" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    {{(isCollapsed) ? 'Expand' : 'Collapse'}}
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card">
    <div class="card-body">
      You can collapse this card by clicking Toggle
    </div>
  </div>
</div>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-ngbd-collapse-basic',
  templateUrl: './collapse-basic.html'
})
export class NgbdCollapseBasic {
  public isCollapsed = false;
}

```

{% endtab %}
{% endtabs %}

### Multiple Target Collapse

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuP3QYL7UX-ibYx_CSk%2F-LuP4BlBUNEEYBqHqw7K%2Fcollapse-multiple.png?alt=media\&token=8c9c4a09-cade-4c9e-88e5-b03d6530a516)
{% endtab %}

{% tab title="HTML" %}

```markup
<p class="mb-0">
  <a class="btn btn-primary mr-2 mb-2" href="#multiCollapseExample1" (click)="collapsedWithAnchor($event)"
     role="button"
     [attr.aria-expanded]="!multiple.option1" aria-controls="multiCollapseExample1">First Element</a>

  <button class="btn btn-primary mr-2 mb-2" type="button" (click)="multiple.option2 = !multiple.option2"
          [attr.aria-expanded]="!multiple.option2" aria-controls="multiCollapseExample2">Second Element
  </button>

  <button class="btn btn-primary mr-2 mb-2" type="button" (click)="toggleCollapsed($event)"
          aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements
  </button>
</p>
<div class="row">
  <div class="col">
    <div class="multi-collapse" id="multiCollapseExample1" [ngbCollapse]="multiple.option1">
      <div class="card card-body mb-0">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="multi-collapse" id="multiCollapseExample2" [ngbCollapse]="multiple.option2">
      <div class="card card-body mb-0">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-ngbd-collapse-basic',
  templateUrl: './collapse-basic.html'
})
export class NgbdCollapseBasic {
  public multiple = {
    option1: true,
    option2: true
  };

  collapsedWithAnchor(event) {
    event.preventDefault();

    this.multiple.option1 = !this.multiple.option1;
  }

  toggleCollapsed(event) {
    event.preventDefault();

    this.multiple.option1 = !this.multiple.option1;
    this.multiple.option2 = !this.multiple.option2;
  }
}

```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/collapse/examples)

### Accordion

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuP5_0kaslsHc_VJX0b%2F-LuP6BrEc8VuzrRZJcu6%2Faccordion.png?alt=media\&token=fe28a29d-ab23-4403-8a5f-f2dc03d725bb)
{% endtab %}

{% tab title="Second Tab" %}

```markup
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel title="Disabled" [disabled]="true">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/accordion/examples)


# Dropdowns

To use Card, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Dropdown Basic

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuPBcJudhuih2ofPsrz%2F-LuPBvXG_bhy5F23G6kH%2Fdropdown.png?alt=media\&token=c203cc72-c53e-4916-a4a5-07c5a1f9748a)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="d-flex flex-wrap">
  <div ngbDropdown class="mr-2 mb-2">
    <button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu>
      <button class="dropdown-item">Action - 1</button>
      <button class="dropdown-item">Another Action</button>
      <button class="dropdown-item">Something else is here</button>
    </div>
  </div>
  <div ngbDropdown placement="top-right" class="mb-2">
    <button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropup</button>
    <div ngbDropdownMenu>
      <button class="dropdown-item">Action - 1</button>
      <button class="dropdown-item">Another Action</button>
      <button class="dropdown-item">Something else is here</button>
    </div>
  </div>
</div>

```

{% endtab %}
{% endtabs %}

### Various color Dropdowns

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuPBcJudhuih2ofPsrz%2F-LuPC23B-5rJvY_WD5x1%2Fdropdown-colors.png?alt=media\&token=b4feedcb-d9d3-4859-bbb5-66c61d420d37)
{% endtab %}

{% tab title="HTML" %}

```markup
<!-- Dropdown -->
<div class="btn-group mr-2 mb-2" ngbDropdown>

  <!-- Dropdown Button -->
  <button type="button" class="btn btn-primary" ngbDropdownToggle>
    Primary
  </button>
  <!-- /dropdown button -->

  <!-- Dropdown Menu -->
  <div ngbDropdownMenu>
    <a class="dropdown-item" href="javascript:void(0)">Action</a>
    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
  </div>
  <!-- /dropdown menu -->

</div>
<!-- /dropdown -->

<!-- Dropdown -->
<div class="btn-group mr-2 mb-2" ngbDropdown>

  <!-- Dropdown Button -->
  <button type="button" class="btn btn-secondary" ngbDropdownToggle>
    Secondary
  </button>
  <!-- /dropdown button -->

  <!-- Dropdown Menu -->
  <div ngbDropdownMenu>
    <a class="dropdown-item" href="javascript:void(0)">Action</a>
    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
  </div>
  <!-- /dropdown menu -->

</div>
<!-- /dropdown -->

<!-- Dropdown -->
<div class="btn-group mr-2 mb-2" ngbDropdown>

  <!-- Dropdown Button -->
  <button type="button" class="btn btn-success" ngbDropdownToggle>
    Success
  </button>
  <!-- /dropdown button -->

  <!-- Dropdown Menu -->
  <div ngbDropdownMenu>
    <a class="dropdown-item" href="javascript:void(0)">Action</a>
    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
  </div>
  <!-- /dropdown menu -->

</div>
<!-- /dropdown -->
```

{% endtab %}
{% endtabs %}

### Button groups and split buttons

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuPCInI8oE4IyJpEYaf%2F-LuPCN8GoR1DoZARkHNu%2Fdropdown-split.png?alt=media\&token=09b26d75-d0a3-48ec-b68b-ac0313513b11)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group mr-3 mb-2">
  <button type="button" class="btn btn-outline-success">Plain ol' button</button>
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button class="btn btn-outline-primary" ngbDropdownToggle>Drop me</button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
      <button class="dropdown-item">Four!</button>
    </div>
  </div>
</div>

<div class="btn-group mr-3 mb-2">
  <button type="button" class="btn btn-primary">Split me</button>
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
      <button class="dropdown-item">Four!</button>
    </div>
  </div>
</div>

```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/dropdown/examples)


# Progress Bar

To use Progress Bar, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Progress Bars

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuPCxRAaG0RprmqevGh%2F-LufbinGztn0CNCsGOuO%2Fprogress-bars.png?alt=media\&token=4730544f-25fb-41aa-b15b-5203ba9bbc99)

{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar type="success" [value]="25"></ngb-progressbar>
<ngb-progressbar type="info" [value]="50"></ngb-progressbar>
<ngb-progressbar type="warning" [value]="75"></ngb-progressbar>
<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>
```

{% endtab %}
{% endtabs %}

### Custom Labels and Striped

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufbwlbH6UeF4E5u2uZ%2F-Lufc456hMRnv7yWKTYl%2Fprogress-bars-with-custom-labels.png?alt=media\&token=8915f2e8-fc59-42ac-b2fd-436ffe31bbf1)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar type="success" [value]="25">25</ngb-progressbar>
<ngb-progressbar type="info" [value]="50">Copying file 2 of 4...</ngb-progressbar>
<ngb-progressbar type="warning" [value]="75" [striped]="true" [animated]="true"><i>50%</i></ngb-progressbar>
<ngb-progressbar type="danger" [value]="100" [striped]="true">Completed!</ngb-progressbar>
```

{% endtab %}
{% endtabs %}

### Current Value Labels

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufcTg3N_Y3KZEd4JLI%2F-LufchMyGqXr4WBkBT_k%2Fprogress-bars-value.png?alt=media\&token=c70d6b24-a573-4cd4-82f8-6e81db7cc8b6)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar showValue="true" type="success" [value]="25"></ngb-progressbar>
<ngb-progressbar [showValue]="true" type="info" [value]="50"></ngb-progressbar>
<ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar>
<ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar>
```

{% endtab %}
{% endtabs %}

### Progress Bars height

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-Lufd9HeSdW7Ud7JO_oD%2F-LufdGZIEBT0noibStpS%2Fprogress-bars-height.png?alt=media\&token=2c12f13f-4cc7-49d0-8ebc-ca39c37b3546)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar type="success" [value]="25">default</ngb-progressbar>
<ngb-progressbar type="info" [value]="50" height="10px">10px</ngb-progressbar>
<ngb-progressbar type="warning" [value]="75" height=".5rem">.5rem</ngb-progressbar>
<ngb-progressbar type="danger" [value]="100" [height]="height">{{height}}</ngb-progressbar>
```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/progressbar/examples)


# Tabs

To use Tabs, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Tabs

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufpL1w3DFMJlDVIbmO%2F-LufpWHWg7QLAc7P1Bnh%2Ftabs.png?alt=media\&token=32293de8-89b9-4aeb-9944-135586c0b5f4)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-tabset [orientation]="orientation">
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="card-body">
        <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
          master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
          keffiyeh
          dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
          cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab>
    <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
    <ng-template ngbTabContent>
      <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
        <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
          farm-to-table
          craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
          vinyl
          cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
          salvia
          yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable
          jean
          shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
          vero
          sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Disabled" [disabled]="true">
    <ng-template ngbTabContent>
      <div class="card-body">
        <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla
          facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
          congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices
          et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus
          faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci
          varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem
          aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

```

{% endtab %}
{% endtabs %}

### Vertical Tabs

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufoX3SQIZ5p2mDyUEb%2F-Lufokj3i7IlI9bl_Iqk%2Ftabs-vertical.png?alt=media\&token=8ab20b5c-74e6-4914-9c59-975c85b94d55)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="tabs-container tabs-vertical tabs-right">
  <ngb-tabset [orientation]="orientation">
    <ngb-tab title="Simple">
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
            master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
            keffiyeh
            dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
            cillum
            iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
          <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
            farm-to-table
            craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
            vinyl
            cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
            salvia
            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable
            jean
            shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
            vero
            sint qui sapiente accusamus tattooed echo park.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab title="Disabled" [disabled]="true">
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla
            facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
            congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices
            et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus
            faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci
            varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem
            aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
        </div>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
<div/>
```

{% endtab %}
{% endtabs %}

### Tabs With Icon

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufoX3SQIZ5p2mDyUEb%2F-Lufob687WMdpNMuAzzo%2Ftabs-icons.png?alt=media\&token=1ff23539-fd77-47d6-8357-9b8f5a369f9f)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="tabs-container tabs-vertical tabs-right">
  <ngb-tabset orientation="vertical">
    <ngb-tab>
      <ng-template ngbTabTitle><gx-icon name="desktop" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
            stumptown aliqua, retro synth
            master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
            retro
            keffiyeh
            dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
            salvia
            cillum
            iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><gx-icon name="dashboard" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee
          squid.
          <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
            artisan four loko
            farm-to-table
            craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
            ullamco ad
            vinyl
            cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica
            VHS
            salvia
            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
            sustainable
            jean
            shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
            butcher
            vero
            sint qui sapiente accusamus tattooed echo park.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><gx-icon name="mail" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">
            <strong>A wonderful serenity has taken possession</strong> of my
            entire soul,
            like these sweet mornings of spring which I enjoy with my whole
            heart. I am alone, and feel the charm of existence in this spot,
            which was created for the bliss of souls like mine.
          </p>
          <p class="card-text">
            I am so happy, my dear friend, so absorbed in the exquisite
            sense of mere tranquil existence, that I neglect my talents. I
            should be incapable of drawing a single stroke at the present
            moment; and yet I feel that I never was a greater artist than
            now.
          </p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab [disabled]="true">
      <ng-template ngbTabTitle><gx-icon name="settings" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh
            elit id diam. Nulla
            facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget
            tincidunt eu,
            congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus
            ultrices
            et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu.
            Vivamus
            faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio.
            Orci
            varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet
            odio ac lorem
            aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
        </div>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</div>
```

{% endtab %}
{% endtabs %}

### Pills Tabs

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufdwLefexXgBZ5IlPX%2F-LufnsNoEqsbFemtp_iV%2Ftabs-pills.png?alt=media\&token=088c90e1-4300-48e5-806e-64c290ec15c4)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-tabset type="pills">
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="card-body px-0">
        <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
          stumptown
          aliqua, retro synth
          master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
          keffiyeh
          dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
          cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab>
    <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
    <ng-template ngbTabContent>
      <div class="card-body px-0">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee
        squid.
        <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
          artisan
          four loko farm-to-table
          craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
          ad
          vinyl
          cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
          salvia
          yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
          sustainable
          jean
          shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
          butcher
          vero
          sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Disabled" [disabled]="true">
    <ng-template ngbTabContent>
      <div class="card-body px-0">
        <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit
          id
          diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget
          tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie
          lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla
          tortor
          arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu
          tincidunt
          odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris
          aliquet
          odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>
```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/tabset/examples)