pip-webui/pip-webui-layouts/samples/split/tool_tiles.html

HTML5 UI for LOB applications

<pip-tabs pip-tabs="navCollection" pip-active-index="activeIndex"
          pip-show-tabs="$state.name == 'tool.view.tiles'"></pip-tabs>

<pip-tiles column-width="440">
    <div class="masonry-brick pip-tile w440-flex layout-column layout-align-center-center"
         ng-repeat="item in selected.itemCollection"
         ng-click="onTileClick(item)" >
        <md-menu md-position-mode="target-right target" class="position-right">
            <md-button class="pip-action md-icon-button" aria-label="menu"
                       ng-click="$mdOpenMenu(); $event.stopPropagation();">
                <md-icon md-svg-icon="icons:vdots"></md-icon>
            </md-button>
            <md-menu-content width="3">
                <md-menu-item>
                    <md-button>Action 1</md-button>
                </md-menu-item>
                <md-menu-item>
                    <md-button>Action 2</md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>
        <div class="pip-tile-body w-stretch">
            <div class="p24-flex pip-details-title">
                <p class="w-stretch bm16 tm0 pip-title">{{ item.title }}</p>
                <div class="bm16 layout-row layout-align-space-between-center">
                        {{'Some text about item ' + item.title}}
                </div>
                <div class="w-stretch layout-row layout-align-start-center">
                    <md-button aria-label="learn more" class="md-accent rm8 lm0" ng-click="$event.stopPropagation()">
                        {{::'Yes'}}
                    </md-button>
                    <md-button aria-label="hide" ng-click="$event.stopPropagation()">{{::'No'}}</md-button>
                </div>
            </div>
        </div>
    </div>

</pip-tiles>