angular-cards (always under development)


Based on Google's Material Design, angular-cards provides easy-to-use directives ready to use.

Demo #1

This is the default example of angular-cards. With card title, a paragraph and an link button.

HTML

<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>

RESULT

Demo #2

This is the default example of angular-cards. Like demo #1 but with an action button.

HTML

<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>

JAVASCRIPT

angular.module('exampleApp', [
   'angular-cards'
])
.controller('exampleCtrl', function(){
   var vm = this;

   vm.showAlert = function() {
      alert('This is an alert!');
   }
});

RESULT

Demo #3

A Material Design card with an image header. With an action button and an link button.

HTML

<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>

JAVASCRIPT

angular.module('exampleApp', [
   'angular-cards'
])
.controller('exampleCtrl', function(){
   var vm = this;

   vm.showAlert = function() {
      alert('This is an alert!');
   }
});

RESULT

Demo #4

Default card with right align buttons.

HTML

<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>

RESULT

Demo #5

Default card with stacked buttons.

HTML

<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>

RESULT

Demo #6

Default card with no action/link button.

HTML

<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>

RESULT

Demo #7

Simple text card. No action buttons, no title, no image.

HTML

<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>

RESULT

Demo #8

Simple text card with icon support.

HTML

<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>

RESULT

Demo #9

Simple text card with icon support.

HTML

<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>

JAVASCRIPT

angular.module('exampleApp', [
   'angular-cards'
])
.controller('exampleCtrl', function(){
   var vm = this;
   
   vm.showAlert = function() {
      alert('This is an alert!');
   }
});

RESULT

Demo #10

Reading data from controller.

HTML

<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>

JAVASCRIPT

.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);
   };
});

RESULT


developed with by Nestor Paez