home chevron_right Components
Cards
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="card-rich-media"> <img src="assets/images/cards/card1.jpg"> </div> <div class="card-primary-title"> <div class="card-title">Kangaroo Valley Safari</div> <div class="card-subtitle secondary-text">Free on Thursdays</div> </div> <div class="card-supporting-text"> 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"> <div class="card-rich-media"> <img src="assets/images/cards/card1.jpg"> </div> <div class="card-primary-title"> <div class="card-title">Kangaroo Valley Safari</div> <div class="card-subtitle secondary-text">Free on Thursdays</div> </div> <div class="card-supporting-text"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="card-actions"> <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="card-primary-title"> <div class="card-title">Kangaroo Valley Safari</div> <div class="card-subtitle secondary-text">Free on Thursdays</div> </div> <div class="card-supporting-text"> 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"> <div class="card-primary-title"> <div class="card-title">Kangaroo Valley Safari</div> <div class="card-subtitle secondary-text">Free on Thursdays</div> </div> <div class="card-supporting-text"> 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="card-actions"> <button mat-button>SHARE</button> <button mat-button>EXPLORE</button> </div> </div>
Kangaroo Valley Safari
Free on Thursdays
<div class="fuse-card"> <div class="card-rich-media"> <img src="assets/images/cards/card1.jpg"> </div> <div class="card-primary-title"> <div class="card-title">Kangaroo Valley Safari</div> <div class="card-subtitle 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"> <div class="card-rich-media"> <img src="assets/images/cards/card1.jpg"> </div> <div class="card-supporting-text"> 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="card-rich-media"> <div class="card-title">Top 10 Holiday Locations</div> <img src="assets/images/cards/card3.jpg"> </div> <div class="card-primary-title"> <div class="card-subtitle secondary-text">Number 10</div> </div> <div class="card-supporting-text"> Cards are a convenient means of displaying content composed of different elements. </div> <div class="card-actions"> <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="card-media-header"> <div class="card-primary-title"> <div class="card-subtitle secondary-text">Travel</div> <div class="card-title">Big City Life</div> </div> <div class="card-rich-media"> <img src="assets/images/cards/card2-small.jpg"> </div> </div> <div class="card-supporting-text"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="card-actions"> <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"> <div class="card-rich-media"> <img src="assets/images/cards/card3.jpg"> </div> <div class="card-primary-title"> <div class="card-title">Top Winter Locations</div> <div class="card-subtitle secondary-text">More than 200 locations</div> </div> <div class="card-supporting-text"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="card-actions"> <button mat-button color="accent">SHARE</button> <button mat-button color="accent">EXPLORE</button> <div class="card-expander"> <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> <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]> <div class="card-expanded-supporting-text"> 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"> <div class="card-rich-media"> <img src="assets/images/cards/card3.jpg"> </div> <div class="card-primary-title"> <div class="card-title">Top Winter Locations</div> <div class="card-subtitle secondary-text">More than 200 locations</div> </div> <div class="card-supporting-text"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="card-actions"> <button mat-button color="accent">SHARE</button> <button mat-button color="accent">EXPLORE</button> <div class="card-expander"> <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> <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]> <div class="card-expanded-supporting-text"> 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="card-avatar-header"> <img class="card-avatar" src="assets/images/avatars/Christy.jpg"> <div class="card-avatar-title"> <div class="card-title">Christy</div> <div class="card-subtitle secondary-text">20 mins. ago</div> </div> </div> <div class="card-rich-media"> <img src="assets/images/cards/card1.jpg"> </div> <div class="card-primary-title"> <div class="card-title">Kangaroo Valley Safari</div> <div class="card-subtitle secondary-text">Free on Thursdays</div> </div> <div class="card-supporting-text"> 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"> <div class="card-rich-media"> <img src="assets/images/cards/card2.jpg"> </div> <div class="card-actions icon-buttons align-right"> <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"> <div class="card-rich-media"> <img src="assets/images/cards/card3-square.jpg"> </div> <div class="card-actions icon-buttons align-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="card-media-header"> <div class="card-primary-title"> <div class="card-subtitle secondary-text">Travel</div> <div class="card-title">Big City Life</div> </div> <div class="card-rich-media"> <img src="assets/images/cards/card2-small.jpg"> </div> </div> <div class="card-supporting-text"> Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. </div> <div class="card-actions"> <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="card-media-header medium"> <div class="card-primary-title"> <div class="card-title">Brooklyn</div> <div class="card-subtitle secondary-text">Travel guide</div> </div> <div class="card-rich-media"> <img src="assets/images/cards/card2-medium.jpg"> </div> </div> <div class="card-actions"> <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="card-media-header large"> <div class="card-primary-title"> <div class="card-title">Brooklyn</div> <div class="card-subtitle secondary-text">Travel guide</div> </div> <div class="card-rich-media"> <img src="assets/images/cards/card2-large.jpg"> </div> </div> <div class="card-actions"> <button mat-button color="accent">READ</button> <button mat-button color="accent">SHARE</button> </div> </div>