Based on Google's Material Design, angular-cards provides easy-to-use directives ready to use.
This is the default example of angular-cards. With card title, a paragraph and an link button.
<ng-card> <card-content card-title="Default Card Example" card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."> </card-content> <card-action> <card-button btn-title="Go to repository" btn-src="https://github.com/npaez/angular-cards"> </card-button> </card-action> </ng-card>
This is the default example of angular-cards. Like demo #1 but with an action button.
<ng-card ng-controller="exampleCtrl as ex"> <card-content card-title="Using ng-click()" card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."> </card-content> <card-action> <card-button btn-title="Fire Action" ng-clicK="ex.showAlert()"> </card-button> </card-action> </ng-card>
angular.module('exampleApp', [ 'angular-cards' ]) .controller('exampleCtrl', function(){ var vm = this; vm.showAlert = function() { alert('This is an alert!'); } });
A Material Design card with an image header. With an action button and an link button.
<ng-card ng-controller="exampleCtrl as ex"> <card-img img-src="img/emma.jpg" img-title="Card with image"> </card-img> <card-content card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation."> </card-content> <card-action> <card-button btn-title="Fire alert" ng-click="ex.showAlert()"> </card-button> <card-button btn-title="Go to repository" btn-src="https://github.com/npaez/angular-cards"> </card-button> </card-action> </ng-card>
angular.module('exampleApp', [ 'angular-cards' ]) .controller('exampleCtrl', function(){ var vm = this; vm.showAlert = function() { alert('This is an alert!'); } });
Default card with right align buttons.
<ng-card> <card-content card-title="Card With Right Button" card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."> </card-content> <card-action class="right-btns"> <card-button btn-title="Go to repository" btn-src="https://github.com/npaez/angular-cards"> </card-button> </card-action> </ng-card>
Default card with stacked buttons.
<ng-card> <card-content card-title="Card with Stack Buttons" card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."> </card-content> <card-action class="right-btns stack-btns"> <card-button btn-title="Go to repository" btn-src="https://github.com/npaez/angular-cards"> </card-button> <card-button btn-title="Go to developer's web" btn-src="http://npaez.github.io/"> </card-button> </card-action> </ng-card>
Default card with no action/link button.
<ng-card> <card-content card-title="Simple Card" card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."> </card-content> </ng-card>
Simple text card. No action buttons, no title, no image.
<ng-card> <card-content card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."> </card-content> </ng-card>
Simple text card with icon support.
<ng-card> <card-content card-icon="<i class='fa fa-hand-spock-o'></i>" card-title="Default Card Example" card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."> </card-content> </ng-card>
Simple text card with icon support.
<ng-card ng-controller="exampleCtrl as ex"> <card-header img-src="img/profile.png" card-title="This is a title" card-subtitle="With a brand subheader"> </card-header> <card-img img-src="img/emma2.jpg"> </card-img> <card-content card-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."> </card-content> <card-action class="right-btns"> <card-button btn-title="Fire alert" ng-click="ex.showAlert()"> </card-button> </card-action> </ng-card>
angular.module('exampleApp', [ 'angular-cards' ]) .controller('exampleCtrl', function(){ var vm = this; vm.showAlert = function() { alert('This is an alert!'); } });
Reading data from controller.
<ng-card ng-controller="example2Ctrl"> <card-content card-title="{{ body.title }}" card-text="{{ body.text }}"> </card-content> <card-action> <card-button btn-title="{{ buttons.title }}" ng-click="controllerFunction('I\'m a friendly alert')" </card-button> <card-button btn-title="{{ buttons2.title }}" btn-src="{{ buttons2.src }}"> </card-button> </card-action> </ng-card>
.controller('example2Ctrl', function($scope){ $scope.body = { title: "Card Title", text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit," + "sed do eiusmod tempor incididunt ut labore et dolore magna" + "aliqua. Ut enim ad minim veniam, quis nostrud exercitation" + "ullamco laboris nisi ut aliquip ex ea commodo consequat." }; $scope.buttons = { title: "Do something" }; $scope.buttons2 = { title: "Sinaptica", src: "https://sinaptica.io/" }; $scope.controllerFunction = function(data) { alert(data); }; });
developed with by Nestor Paez