{"version":"1.0","type":"rich","title":"Components styling - sample template","description":"This example demonstrates how to display movie information cards using Angular Material components within a template-driven layout. It shows a movie card containing a title, release year, genre, poster image, and plot summary arranged in a responsive two-column row. The code uses Angular Material’s `mat-card`, `mat-card-header`, `mat-card-title`, `mat-card-subtitle`, and `mat-card-content` APIs, along with the Angular Flex Layout directive `fxLayout` and `fxFlex` for responsive spacing. Data binding via `{{title}}`, `{{year}}`, `{{genre}}`, `{{poster}}`, and `{{plot}}` suggests the card is populated from a movie object, though the underlying data source is not shown.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-00f3f6f0013dbb10025c5ca21c37c2e1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}