home chevron_right Components
Cards
View Source
Kangaroo Valley Safari
Free on Thursdays
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
<div class="fuse-card"> <img src="assets/images/cards/card1.jpg"> <div class="p-16"> <div class="h1">Kangaroo Valley Safari</div> <div class="h4 secondary-text">Free on Thursdays</div> </div> <div class="p-16 pt-0 line-height-1.75"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> </div>
Kangaroo Valley Safari
Free on Thursdays
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
<div class="fuse-card"> <img src="assets/images/cards/card1.jpg"> <div class="p-16"> <div class="h1">Kangaroo Valley Safari</div> <div class="h4 secondary-text">Free on Thursdays</div> </div> <div class="p-16 pt-0 line-height-1.75"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">SHARE</button> <button mat-button color="accent">EXPLORE</button> </div> </div>
Kangaroo Valley Safari
Free on Thursdays
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
<div class="fuse-card"> <div class="p-16"> <div class="h1">Kangaroo Valley Safari</div> <div class="h4 secondary-text">Free on Thursdays</div> </div> <div class="p-16 pt-0 line-height-1.75"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> </div>
Kangaroo Valley Safari
Free on Thursdays
All cards can be mixed with Fuse Color Classes to have different colors. This greatly increases the unique variations of all cards. Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
<div class="fuse-card mat-indigo-bg"> <div class="p-16"> <div class="h1">Kangaroo Valley Safari</div> <div class="h4 secondary-text">Free on Thursdays</div> </div> <div class="p-16 pt-0 line-height-1.75"> All cards can be mixed with Fuse Color Classes to have different colors. This greatly increases the unique variations of all cards. Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button>SHARE</button> <button mat-button>EXPLORE</button> </div> </div>
Kangaroo Valley Safari
Free on Thursdays
<div class="fuse-card"> <img src="assets/images/cards/card1.jpg"> <div class="p-16"> <div class="h1">Kangaroo Valley Safari</div> <div class="h4 secondary-text">Free on Thursdays</div> </div> </div>
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
<div class="fuse-card"> <img src="assets/images/cards/card1.jpg"> <div class="p-16 line-height-1.75"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> </div>
Top 10 Holiday Locations
Number 10
Cards are a convenient means of displaying content composed of different elements.
<div class="fuse-card"> <div class="position-relative"> <img src="assets/images/cards/card3.jpg"> <div class="position-absolute font-size-20 white-fg p-16 align-left align-bottom"> Top 10 Holiday Locations </div> </div> <div class="p-16"> <div class="h4 secondary-text">Number 10</div> </div> <div class="p-16 pt-0 line-height-1.75"> Cards are a convenient means of displaying content composed of different elements. </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">SHARE</button> <button mat-button color="accent">EXPLORE</button> </div> </div>
Travel
Big City Life
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pr-16"> <div class="h4 secondary-text">Travel</div> <div class="h1">Big City Life</div> </div> <div class="w-80 h-80"> <img src="assets/images/cards/card2-small.jpg"> </div> </div> <div class="p-16 pt-0 line-height-1.75"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">READ</button> <button mat-button color="accent">SHARE</button> </div> </div>
Top Winter Locations
More than 200 locations
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
Card content that exceeds the maximum card height is truncated and does not scroll, but the card can be expanded. Once expanded, the card may exceed the maximum height of the view. In this case, the card will scroll with the card collection.
<div class="fuse-card"> <img src="assets/images/cards/card3.jpg"> <div class="p-16"> <div class="h1">Top Winter Locations</div> <div class="h4 secondary-text">More than 200 locations</div> </div> <div class="p-16 pt-0 line-height-1.75"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">SHARE</button> <button mat-button color="accent">EXPLORE</button> </div> <button mat-icon-button aria-label="expand card" (click)="card9Expanded = !card9Expanded"> <mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon> </button> </div> <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]> <div class="card-expanded-content"> Card content that exceeds the maximum card height is truncated and does not scroll, but the card can be expanded. Once expanded, the card may exceed the maximum height of the view. In this case, the card will scroll with the card collection. </div> </div> </div>
Top eastern road trips
2,000 miles of wonder
Card content that exceeds the maximum card height is truncated and does not scroll, but the card can be expanded. Once expanded, the card may exceed the maximum height of the view. In this case, the card will scroll with the card collection.
<div class="fuse-card"> <img src="assets/images/cards/card2.jpg"> <div class="p-16"> <div class="h1">Top eastern road trips</div> <div class="h4 secondary-text">2,000 miles of wonder</div> </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">SHARE</button> <button mat-button color="accent">EXPLORE</button> </div> <button mat-icon-button aria-label="expand card" (click)="card10Expanded = !card10Expanded"> <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon> </button> </div> <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]> <div class="card-expanded-content"> Card content that exceeds the maximum card height is truncated and does not scroll, but the card can be expanded. Once expanded, the card may exceed the maximum height of the view. In this case, the card will scroll with the card collection. </div> </div> </div>
Christy
20 mins. ago
Kangaroo Valley Safari
Free on Thursdays
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="start center"> <img class="w-40 h-40 border-radius-100" src="assets/images/avatars/Christy.jpg"> <div class="ml-16"> <div class="text-bold">Christy</div> <div class="h5 text-bold secondary-text">20 mins. ago</div> </div> </div> <img src="assets/images/cards/card1.jpg"> <div class="p-16"> <div class="h1">Kangaroo Valley Safari</div> <div class="h4 secondary-text">Free on Thursdays</div> </div> <div class="p-16 pt-0 line-height-1.75"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> </div>
<div class="fuse-card"> <img src="assets/images/cards/card2.jpg"> <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="end center"> <button mat-icon-button aria-label="add to favorites"> <mat-icon>favorite</mat-icon> </button> <button mat-icon-button aria-label="bookmark"> <mat-icon>bookmark</mat-icon> </button> <button mat-icon-button aria-label="send location"> <mat-icon>location_on</mat-icon> </button> </div> </div>
Winter
<div class="fuse-card variable-width"> <div class="position-relative"> <img src="assets/images/cards/card3-square.jpg"> <div class="position-absolute font-size-20 white-fg p-16 align-left align-bottom"> Winter </div> </div> <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="center center"> <button mat-icon-button aria-label="add to favorites"> <mat-icon>favorite</mat-icon> </button> <button mat-icon-button aria-label="bookmark"> <mat-icon>bookmark</mat-icon> </button> <button mat-icon-button aria-label="send location"> <mat-icon>location_on</mat-icon> </button> </div> </div>
Brooklyn
Travel guide
<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pr-16"> <div class="h1">Brooklyn</div> <div class="h4 secondary-text">Travel guide</div> </div> <div class="w-80 h-80"> <img src="assets/images/cards/card2-small.jpg"> </div> </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">READ</button> <button mat-button color="accent">SHARE</button> </div> </div>
Brooklyn
Travel guide
<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start"> <div class="pr-16"> <div class="h1">Brooklyn</div> <div class="h4 secondary-text">Travel guide</div> </div> <div class="w-120 h-120"> <img src="assets/images/cards/card2-medium.jpg"> </div> </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">READ</button> <button mat-button color="accent">SHARE</button> </div> </div>
Brooklyn
Travel guide
<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start"> <div class="pr-16"> <div class="h1">Brooklyn</div> <div class="h4 secondary-text">Travel guide</div> </div> <div class="w-160 h-160"> <img src="assets/images/cards/card2-large.jpg"> </div> </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">READ</button> <button mat-button color="accent">SHARE</button> </div> </div>
Coffee NewYork
star star star star star_half
4.7
(51)
Small plates, salads & sandwiches in an intimate setting with 12 indoor seats plus patio seating.
Tonight's Availability
access_time 5:30PM 7:30PM 9:00PM
<div class="fuse-card"> <img src="assets/images/cards/card2.jpg"> <div class="p-16"> <div class="h1">Coffee NewYork</div> <div class="h5 secondary-text"> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon class="s-16 amber-fg">star</mat-icon> <mat-icon class="s-16 amber-fg">star</mat-icon> <mat-icon class="s-16 amber-fg">star</mat-icon> <mat-icon class="s-16 amber-fg">star</mat-icon> <mat-icon class="s-16 amber-fg">star_half</mat-icon> <div class="ml-8 secondary-text">4.7</div> <div class="ml-4 secondary-text">(51)</div> </div> </div> </div> <div class="px-16 line-height-1.75"> Small plates, salads & sandwiches in an intimate setting with 12 indoor seats plus patio seating. </div> <div class="card-divider"></div> <div class="p-16 pt-0 line-height-1.75"> <div class="mb-16 text-bold">Tonight's Availability</div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon class="mr-16">access_time</mat-icon> <mat-button-toggle-group> <mat-button-toggle value="0530PM"> 5:30PM </mat-button-toggle> <mat-button-toggle value="0730PM" [checked]="true"> 7:30PM </mat-button-toggle> <mat-button-toggle value="0900PM"> 9:00PM </mat-button-toggle> </mat-button-toggle-group> </div> </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">RESERVE</button> </div> </div>
San Francisco
Mon, 12:30 PM, Mostly Sunny
23 ° C
23 km/h
48 %
Tuesday
24°
/
12°
Wednesday
22°
/
14°
Thursday
23°
/
13°
Friday
25°
/
15°
Saturday
24°
/
15°
<div class="fuse-card"> <div class="p-16"> <div class="h1">San Francisco</div> <div class="h4 secondary-text">Mon, 12:30 PM, Mostly Sunny</div> </div> <div class="p-16 pt-0" fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="row" fxLayoutAlign="start start"> <span class="font-weight-300 font-size-72 line-height-72">23</span> <span class="font-weight-300 font-size-48 line-height-48 ml-8 mt-4">°</span> <span class="font-weight-300 font-size-48 line-height-48 mt-4">C</span> </div> <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-64"></mat-icon> </div> <div class="px-16 pb-4"> <div class="pb-8" fxLayout="row" fxLayoutAlign="start center"> <mat-icon fontSet="meteocons" fontIcon="icon-wind" class="icon s-16 mr-16"></mat-icon> <div>23 km/h</div> </div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon fontSet="meteocons" fontIcon="icon-rainy2" class="icon s-16 mr-16"></mat-icon> <div>48 %</div> </div> </div> <div class="card-divider"></div> <div class="p-16 pt-4"> <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center"> <div>Tuesday</div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon fontSet="meteocons" fontIcon="icon-sun" class="icon s-16 mr-16"></mat-icon> <div class="secondary-text">24°</div> <div class="disabled-text">/</div> <div class="disabled-text">12°</div> </div> </div> <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center"> <div>Wednesday</div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon fontSet="meteocons" fontIcon="icon-sun" class="icon s-16 mr-16"></mat-icon> <div class="secondary-text">22°</div> <div class="disabled-text">/</div> <div class="disabled-text">14°</div> </div> </div> <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center"> <div>Thursday</div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-16 mr-16"></mat-icon> <div class="secondary-text">23°</div> <div class="disabled-text">/</div> <div class="disabled-text">13°</div> </div> </div> <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center"> <div>Friday</div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-16 mr-16"></mat-icon> <div class="secondary-text">25°</div> <div class="disabled-text">/</div> <div class="disabled-text">15°</div> </div> </div> <div fxLayout="row" fxLayoutAlign="space-between center"> <div>Saturday</div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-16 mr-16"></mat-icon> <div class="secondary-text">24°</div> <div class="disabled-text">/</div> <div class="disabled-text">15°</div> </div> </div> </div> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">FULL REPORT</button> </div> </div>
Google Inc.
NASDAQ: GOOG
540.48
trending_up
2.29 (2.05%)
<div class="fuse-card"> <div class="mat-light-blue-600-bg"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pr-16"> <div class="h1 font-weight-300">Google Inc.</div> <div class="h5 secondary-text">NASDAQ: GOOG</div> </div> <div> <button mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more"> <mat-icon>more_vert</mat-icon> </button> <mat-menu #card19Menu="matMenu"> <button mat-menu-item> <mat-icon>trending_up</mat-icon> <span>Trend</span> </button> <button mat-menu-item> <mat-icon>history</mat-icon> <span>History</span> </button> <button mat-menu-item> <mat-icon>notifications_off</mat-icon> <span>Disable alerts</span> </button> </mat-menu> </div> </div> <div class="p-16 pt-8" fxLayout="row" fxLayoutAlign="space-between end"> <div class="font-size-48 font-weight-300 line-height-1">540.48</div> <div fxLayout="row" fxLayoutAlign="start center"> <mat-icon>trending_up</mat-icon> <div class="ml-8">2.29 (2.05%)</div> </div> </div> </div> <mat-tab-group backgroundColor="accent"> <mat-tab label="1DAY"> <div class="h-200 my-16"> <ngx-charts-line-chart *fuseIfOnDom [scheme]="card19.scheme" [results]="card19.data" [xAxis]="false" [yAxis]="true" [yScaleMin]="'538'" [yScaleMax]="'541'"> </ngx-charts-line-chart> </div> </mat-tab> <mat-tab label="1WEEK"> <div class="h-200 my-16"> <ngx-charts-line-chart *fuseIfOnDom [scheme]="card19.scheme" [results]="card19.data" [xAxis]="false" [yAxis]="true" [yScaleMin]="'538'" [yScaleMax]="'541'"> </ngx-charts-line-chart> </div> </mat-tab> <mat-tab label="1MONTH"> <div class="h-200 my-16"> <ngx-charts-line-chart *fuseIfOnDom [scheme]="card19.scheme" [results]="card19.data" [xAxis]="false" [yAxis]="true" [yScaleMin]="'538'" [yScaleMax]="'541'"> </ngx-charts-line-chart> </div> </mat-tab> </mat-tab-group> </div>
Top campaigns

| Clicks | Conv
--- | --- | ---
Holiday Travel | 3621 | 90
Get Away Deals | 703 | 7
Airfare | 532 | 0
Vacation | 201 | 8
Hotels | 94 | 4

<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="h1 pr-16">Top campaigns</div> <div> <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more"> <mat-icon>more_vert</mat-icon> </button> <mat-menu #card20Menu="matMenu"> <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item> <mat-icon color="accent">check_box</mat-icon> <span>Show Clicks</span> </button> <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item> <mat-icon color="accent">check_box</mat-icon> <span>Show Conversion</span> </button> <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item> <mat-icon>check_box_outline_blank</mat-icon> <span>Show CPC</span> </button> </mat-menu> </div> </div> <table class="simple clickable"> <thead> <tr> <th></th> <th class="text-right">Clicks</th> <th class="text-right">Conv</th> </tr> </thead> <tbody> <tr> <td>Holiday Travel</td> <td class="text-right">3621</td> <td class="text-right">90</td> </tr> <tr> <td>Get Away Deals</td> <td class="text-right">703</td> <td class="text-right">7</td> </tr> <tr> <td>Airfare</td> <td class="text-right">532</td> <td class="text-right">0</td> </tr> <tr> <td>Vacation</td> <td class="text-right">201</td> <td class="text-right">8</td> </tr> <tr> <td>Hotels</td> <td class="text-right">94</td> <td class="text-right">4</td> </tr> </tbody> </table> <div class="card-divider full-width"></div> <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">GO TO CAMPAIGNS</button> </div> </div>
Schedule
Today Yesterday

### Group Meeting

In 32 minutes - Room 1B

### Coffee Break

10:30AM

### Public Beta Release

11:00AM

### Lunch

12:10PM

### Dinner with David

17:30PM

<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="h1 pr-16">Top campaigns</div> <div> <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more"> <mat-icon>more_vert</mat-icon> </button> <mat-menu #card20Menu="matMenu"> <button mat-menu-item> <mat-icon color="accent">check_box</mat-icon> <span>Show Clicks</span> </button> <button mat-menu-item> <mat-icon color="accent">check_box</mat-icon> <span>Show Conversion</span> </button> <button mat-menu-item> <mat-icon>check_box_outline_blank</mat-icon> <span>Show CPC</span> </button> </mat-menu> </div> </div> <table class="simple clickable"> <thead> <tr> <th></th> <th>Clicks</th> <th>Conv</th> </tr> </thead> <tbody> <tr> <td>Holiday Travel</td> <td>3621</td> <td>90</td> </tr> <tr> <td>Get Away Deals</td> <td>703</td> <td>7</td> </tr> <tr> <td>Airfare</td> <td>532</td> <td>0</td> </tr> <tr> <td>Vacation</td> <td>201</td> <td>8</td> </tr> <tr> <td>Hotels</td> <td>94</td> <td>4</td> </tr> </tbody> </table> <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center"> <button mat-button color="accent">SEE COMPLETE SCHEDULE</button> </div> </div>
Sales Reports

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.

Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.

Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.

Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.

<div class="fuse-card"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pr-16"> <div class="h1 font-weight-300">Sales Reports</div> </div> <div> <button mat-icon-button [matMenuTriggerFor]="card22Menu" aria-label="more"> <mat-icon>more_vert</mat-icon> </button> <mat-menu #card22Menu="matMenu"> <button mat-menu-item> <mat-icon>history</mat-icon> <span>History</span> </button> <button mat-menu-item> <mat-icon>notifications_off</mat-icon> <span>Disable alerts</span> </button> </mat-menu> </div> </div> <mat-tab-group> <mat-tab label="1WEEK"> <div class="p-16"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. </p> <p> Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. </p> </div> </mat-tab> <mat-tab label="2WEEKS"> <div class="p-16"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. </p> <p> Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. </p> </div> </mat-tab> <mat-tab label="3WEEKS"> <div class="p-16"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. </p> <p> Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. </p> </div> </mat-tab> </mat-tab-group> </div>
Shopping List
Milk Tomatoes Green Apples Chocolate Bar Break Eggs Lettuce Pickles
<div class="fuse-card"> <div class="p-16 pb-0"> <div class="h1 font-weight-300">Shopping List</div> </div> <div class="card-divider"></div> <mat-selection-list class="pt-0 pb-16"> <mat-list-option checkboxPosition="before" selected>Milk</mat-list-option> <mat-list-option checkboxPosition="before">Tomatoes</mat-list-option> <mat-list-option checkboxPosition="before" selected>Green Apples</mat-list-option> <mat-list-option checkboxPosition="before" selected>Chocolate Bar</mat-list-option> <mat-list-option checkboxPosition="before">Break</mat-list-option> <mat-list-option checkboxPosition="before">Eggs</mat-list-option> <mat-list-option checkboxPosition="before" selected>Lettuce</mat-list-option> <mat-list-option checkboxPosition="before">Pickles</mat-list-option> </mat-selection-list> </div>
Sessions by device
Desktop
92.8%
arrow_downward
-0.6%
Mobile
6.1%
arrow_upward
+0.7%
Tablet
1.1%
arrow_upward
+0.1%
Today Yesterday Last 7 days Last 28 days Last 90 days
<div class="fuse-card"> <div class="p-16"> <div class="h1 font-weight-300">Sessions by device</div> </div> <div class="h-200"> <ngx-charts-pie-chart [scheme]="card24.scheme" [results]="card24.devices" [doughnut]="true"> </ngx-charts-pie-chart> </div> <div class="p-16" fxLayout="row" fxLayoutAlign="center center"> <div class="px-16" fxLayout="column" fxLayoutAlign="start center"> <div class="h4 secondary-text">Desktop</div> <div class="h2 font-weight-300 py-8">92.8%</div> <div fxLayout="row" fxLayoutAlign="center center"> <mat-icon class="s-18 pr-4 red-fg"> arrow_downward </mat-icon> <div class="h5 red-fg"> -0.6% </div> </div> </div> <div class="px-16" fxLayout="column" fxLayoutAlign="start center"> <div class="h4 secondary-text">Mobile</div> <div class="h2 font-weight-300 py-8">6.1%</div> <div fxLayout="row" fxLayoutAlign="center center"> <mat-icon class="s-18 pr-4 green-fg"> arrow_upward </mat-icon> <div class="h5 green-fg"> +0.7% </div> </div> </div> <div class="px-16" fxLayout="column" fxLayoutAlign="start center"> <div class="h4 secondary-text">Tablet</div> <div class="h2 font-weight-300 py-8">1.1%</div> <div fxLayout="row" fxLayoutAlign="center center"> <mat-icon class="s-18 pr-4 green-fg"> arrow_upward </mat-icon> <div class="h5 green-fg"> +0.1% </div> </div> </div> </div> <div class="card-divider mb-0"></div> <div class="px-16" fxLayout="row" fxLayoutAlign="space-between center"> <mat-form-field> <mat-select class="simplified" value="7days"> <mat-option value="today">Today</mat-option> <mat-option value="yesterday">Yesterday</mat-option> <mat-option value="7days">Last 7 days</mat-option> <mat-option value="28days">Last 28 days</mat-option> <mat-option value="90days">Last 90 days</mat-option> </mat-select> </mat-form-field> <button mat-button color="accent">OVERVIEW</button> </div> </div>
Conversion
492
+22% of target
<div class="fuse-card"> <div class="p-16"> <div class="h5 secondary-text">Conversion</div> <div class="font-size-54 font-weight-300 line-height-1 mt-8">492</div> </div> <div class="p-16 pt-0"> <span class="green-fg">+22%</span> of target </div> <div class="h-80"> <ngx-charts-bar-vertical [scheme]="card25.scheme" [results]="card25.data"> </ngx-charts-bar-vertical> </div> </div>
Impressions
87.4M
+12.3% of target
<div class="fuse-card"> <div class="p-16"> <div class="h5 secondary-text">Impressions</div> <div class="font-size-54 font-weight-300 line-height-1 mt-8">87.4M</div> </div> <div class="p-16 pt-0"> <span class="green-fg">+12.3%</span> of target </div> <div class="h-80"> <ngx-charts-line-chart [scheme]="card26.scheme" [results]="card26.data" [curve]="card26.curve"> </ngx-charts-line-chart> </div> </div>