fuse-widget is a custom built Fuse component allows to create flippable widget boxes.
fuse-widget
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <!-- Front --> <div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div>Widget title</div> <button md-icon-button fuseWidgetToggle aria-label="more"> <md-icon>more_vert</md-icon> </button> </div> <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center"> Widget Content </div> </div> <!-- / Front --> <!-- Back --> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <md-icon class="s-16">close</md-icon> </button> <div> More widget info </div> </div> <!-- / Back --> </fuse-widget>