diff --git a/src/js/app.js b/src/js/app.js
index 3946717..27a204c 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -6,4 +6,12 @@ angular.module('focaBotoneraFacturador', [])
             botones: '<',
             max: '<'
         }
+    })
+    .component('focaBotoneraTarjetas', {
+        templateUrl: 'src/views/botonera-tarjetas.html',
+        controller: 'focaBotoneraTarjetasController',
+        bindings: { 
+            botones: '<',
+            max: '<'
+        }
     });
diff --git a/src/js/controllerTarjetas.js b/src/js/controllerTarjetas.js
new file mode 100644
index 0000000..2f0bce6
--- /dev/null
+++ b/src/js/controllerTarjetas.js
@@ -0,0 +1,43 @@
+angular.module('focaBotoneraFacturador')
+    .controller('focaBotoneraTarjetasController', [
+        '$scope',
+        '$window',
+        'APP',
+        function($scope, $window, APP) {
+            this.$onInit = function() {
+                $scope.botones = $scope.$ctrl.botones;
+                //TODO: controlar que no se estiren los botones
+                if(APP) return;
+                var max = ($scope.$ctrl.max) ? $scope.$ctrl.max : 12;
+                if($window.innerWidth > 576) {
+                    while(($scope.botones.length % max) !== 0) {
+                        $scope.botones.push('');
+                    }
+                }else {
+                    while(($scope.botones.length % 4) !== 0) {
+                        $scope.botones.push('');
+                    }
+                }
+            };
+
+            function nombreFuncion(string) {
+                var texto = 'seleccionar';
+                var arr = string.split(' ');
+                arr.forEach(function(palabra) {
+                    palabra = palabra.charAt(0).toUpperCase() + palabra.slice(1);
+                    texto += palabra;
+                });
+                return texto;
+            }
+
+            $scope.ejecutarFuncion = function(nombre) {
+                $scope.$parent[nombreFuncion(nombre)]();
+            };
+
+            $scope.activarBoton = function (boton){
+                $scope.botones.forEach(boton => {
+                    boton.active = false;
+                });
+                boton.active = true;
+            };
+    }]);
diff --git a/src/views/botonera-tarjetas.html b/src/views/botonera-tarjetas.html
new file mode 100644
index 0000000..1b2b760
--- /dev/null
+++ b/src/views/botonera-tarjetas.html
@@ -0,0 +1,21 @@
+<div
+    class="col-4 col-lg-2 pb-3"
+    ng-repeat="boton in botones track by $index"
+    ng-class="{'d-md-grid': boton == ''}">
+    <button
+        type="button"
+        class="btn btn-block btn-tarjeta rounded border p-1"
+        ng-click="
+            (boton != '') ? ejecutarFuncion(boton.label) : null;
+            activarBoton(boton);"
+        ng-class="
+            {
+                'd-sm-block h-100': boton == '',
+                'border-light': !boton.active,
+                'border-warning': boton.active
+            }"
+        ng-disabled="boton.disable"
+    >
+        <img ng-src="./img/{{boton.image}}" alt="">
+    </button>
+</div>