diff --git a/public_html/classes/render-adminlte.class.php b/public_html/classes/render-adminlte.class.php
index 960687a9e9fce3d9d557fb12590de2f87af7ff12..a6a0431115e2ff16c32408fa7c23ec8acd7e5552 100755
--- a/public_html/classes/render-adminlte.class.php
+++ b/public_html/classes/render-adminlte.class.php
@@ -354,6 +354,26 @@ class renderadminlte {
 
     // ----------------------------------------------------------------------
 
+    /**
+     * helper function for get[COMPONENTNAME] functions:
+     * ensure that all wanted keys exist in an array. Non existing keys will be added with value false
+     * @param  array  $aOptions  options array of the method
+     * @param  array  $aKeys     required keys
+     * @return array
+     */
+    protected function _ensureOptions($aOptions, $aKeys){
+        foreach ($aKeys as $sKey){
+            if(!isset($aOptions[$sKey])){
+                $aOptions[$sKey]=false;
+                if(!isset($aOptions['_infos'])){
+                    $aOptions['_infos']=[];
+                }
+                $aOptions['_infos'][]="added missing key: $sKey";
+            }
+            $this->_checkValue($sKey, $aOptions[$sKey]);
+        }
+        return $aOptions;
+    }
 
     /**
      * return a alert box      
@@ -366,12 +386,7 @@ class renderadminlte {
      * @return string
      */
     public function getAlert($aOptions){
-        foreach (array('type','dismissible', 'title', 'text') as $sKey){
-            if(!isset($aOptions[$sKey])){
-                $aOptions[$sKey]=false;
-            }
-            $this->_checkValue($sKey, $aOptions[$sKey]);
-        }
+        $aOptions=$this->_ensureOptions($aOptions, ['type','dismissible', 'title', 'text']);
         $aAlertIcons=[
             'danger'=>'icon fas fa-ban',
             'info'=>'icon fas fa-info',
@@ -386,10 +401,12 @@ class renderadminlte {
                 ,
             'label'=>''
                 . ($aOptions['dismissible'] ? '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' : '')
-                . $this->_oHtml->getTag('h5', [],
-                    (isset($aAlertIcons[$aOptions['type']]) ? '<i class=""></i> ' : '')
-                    .$aOptions['text']
-                    )
+                . $this->_oHtml->getTag('h5', [
+                    'label'=> ''
+                        .(isset($aAlertIcons[$aOptions['type']]) ? '<i class="'.$aAlertIcons[$aOptions['type']].'"></i> ' : '')
+                        .$aOptions['title']
+                    ])
+                .$aOptions['text']
         ];
 
         return $this->_oHtml->getTag('div', $aElement);
@@ -413,13 +430,7 @@ class renderadminlte {
      *                          - type    - one of [none]|danger|dark|info|primary|secondary|success|warning
      */
     public function getBadge($aOptions){
-        $_aParams=['bgcolor', 'class', 'id', 'text', 'title', 'type'];
-        foreach ($_aParams as $sKey){
-            if(!isset($aOptions[$sKey])){
-                $aOptions[$sKey]=false;
-            }
-            $this->_checkValue($sKey, $aOptions[$sKey]);
-        }
+        $aOptions=$this->_ensureOptions($aOptions, ['bgcolor', 'class', 'id', 'text', 'title', 'type']);
         $aElement=[];
         $aElement['class']='badge'
             . ($aOptions['class']   ? ' badge-'.$aOptions['class'] : '')
@@ -447,12 +458,7 @@ class renderadminlte {
      * @return string
      */
     public function getButton($aOptions){
-        foreach (array('type', 'size', 'class', 'text', 'icon') as $sKey){
-            if(!isset($aOptions[$sKey])){
-                $aOptions[$sKey]=false;
-            }
-            $this->_checkValue($sKey, $aOptions[$sKey]);
-        }
+        $aOptions=$this->_ensureOptions($aOptions, ['type', 'size', 'class', 'text', 'icon']);
         $aElement=[
             'class'=>'btn '
                 .(isset($aOptions['class']) ? ' '.$aOptions['class'] : '')
@@ -465,35 +471,40 @@ class renderadminlte {
     }
 
     /**
-     * get a card
+     * get a calout (box with coloered left border; has type, title + text)
+     * 
+     * @param type $aOptions  hash with keys for all options
+     *                        >> styling
+     *                          - type    - one of [none]|danger|dark|info|primary|secondary|success|warning
+     *                          - class   - optional css class
      * 
-     * <div class="card">
-     *   <div class="card-header">
-     *     <h3 class="card-title">Default Card Example</h3>
-     *     <div class="card-tools">
-     *       <!-- Buttons, labels, and many other things can be placed here! -->
-     *       <!-- Here is a label for example -->
-     *       <span class="badge badge-primary">Label</span>
-     *     </div>
-     *     <!-- /.card-tools -->
-     *   </div>
-     *   <!-- /.card-header -->
-     *   <div class="card-body">
-     *     The body of the card
-     *   </div>
-     *   <!-- /.card-body -->
-     *   <div class="card-footer">
-     *     The footer of the card
-     *   </div>
-     *   <!-- /.card-footer -->
-     * </div>
-     * <!-- /.card -->
+     *                        >> texts/ html content
+     *                          - title   - text: title of the card
+     *                          - text    - text: content of the card
+     * @return string
+     */
+    public function getCallout($aOptions){
+        $aOptions=$this->_ensureOptions($aOptions, ['type', 'class', 'title', 'text']);
+        $sClass='callout'
+                .($aOptions['class'] ? ' '.$aOptions['class'] : '')
+                .($aOptions['type']  ? ' callout-'.$aOptions['type'] : '')
+                ;
+
+        return $this->addWrapper(
+            'div', ['class'=>$sClass],
+            ($aOptions['title'] ? $this->_oHtml->getTag('h5', ['label'=>$aOptions['title']]) : '')
+            .($aOptions['text'] ? $this->_oHtml->getTag('p', ['label'=>$aOptions['text']]) : '')
+        );
+    }
+
+    /**
+     * get a card
      * 
      * @param type $aOptions  hash with keys for all options
      *                        >> styling
-     *                          - variant: "default" - titlebar is colored
-     *                                     "outline" - small stripe on top border is colored
-     *                                     "fill"    - whole card is colored
+     *                          - variant: "default"  - titlebar is colored
+     *                                     "outline"  - small stripe on top border is colored
+     *                                     "solid"    - whole card is colored
      *                                     "gradient" - whole card is colored with a gradient
      *                          - type    - one of [none]|danger|dark|info|primary|secondary|success|warning
      *                          - class   - any css class for customizing, eg. "disabled"
@@ -506,18 +517,12 @@ class renderadminlte {
      * @return string
      */
     public function getCard($aOptions){
-        foreach (array('variant', 'type', 'class', 'text', 'icon') as $sKey){
-            if(!isset($aOptions[$sKey])){
-                $aOptions[$sKey]=false;
-            }
-            $this->_checkValue($sKey, $aOptions[$sKey]);
-        }
-
+        $aOptions=$this->_ensureOptions($aOptions, ['variant', 'type', 'class', 'title', 'tools', 'text', 'footer']);
         // css class prefixes based on "variant" value
         $aVariants=[
             'default'  => 'card-',
             'outline'  => 'card-outline card-',
-            'fill'     => 'bg-',
+            'solid'    => 'bg-',
             'gradient' => 'bg-gradient-',
         ];
 
@@ -562,6 +567,7 @@ class renderadminlte {
 
 
 
+
 
 
     // ----------------------------------------------------------------------
@@ -656,7 +662,7 @@ class renderadminlte {
      *                          - text
      * @return string
      */
-    public function getCallout($aOptions){
+    public function MIGRATED__getCallout($aOptions){
         foreach (array('type', 'title', 'text') as $sKey){
             if(!isset($aOptions[$sKey])){
                 $aOptions[$sKey]=false;
diff --git a/public_html/inc_functions.php b/public_html/inc_functions.php
index 84531e325ed31d8884f627b49c0b2e28b430ff98..552445613d1177eb1ecb27dea19f9f586eba21b4 100644
--- a/public_html/inc_functions.php
+++ b/public_html/inc_functions.php
@@ -11,7 +11,12 @@ function showExample($sPhpcode){
         <pre>'.htmlentities($sPhpcode).'</pre>
 
         <h3>Output</h3>
+            visual output:<br>
+            <br>
             '.$sOut.'
+            <br>
+            generated html code (line breaks were added here):
+            <pre>'.htmlentities(str_replace([">", "</"], [">\n", "\n</"], $sOut)).'</pre>
 
     ';
 }
\ No newline at end of file
diff --git a/public_html/pages/components/alert.php b/public_html/pages/components/alert.php
new file mode 100644
index 0000000000000000000000000000000000000000..6910065302d6ada8a2cef18ef77d2388067f06db
--- /dev/null
+++ b/public_html/pages/components/alert.php
@@ -0,0 +1,22 @@
+<?php 
+
+$aOptions=[
+    'type'=>'warning',
+    'title'=>'I need your attention',
+    'dismissible'=>1,
+    'text'=>'Please check it. Maybe there is something wrong here.',
+];
+
+
+echo $renderAdminLTE->addRow(
+    '<h2>Alert</h2>'
+)
+.$renderAdminLTE->addRow(
+    '<h3>Syntax</h3>
+    <pre>
+    echo $renderAdminLTE->getAlert($aOptions)
+    </pre>
+    '
+)
+.showExample('$renderAdminLTE->getAlert('.var_export($aOptions, 1).')')
+;
\ No newline at end of file
diff --git a/public_html/pages/components/badges.php b/public_html/pages/components/badge.php
similarity index 100%
rename from public_html/pages/components/badges.php
rename to public_html/pages/components/badge.php
diff --git a/public_html/pages/components/buttons.php b/public_html/pages/components/button.php
similarity index 100%
rename from public_html/pages/components/buttons.php
rename to public_html/pages/components/button.php
diff --git a/public_html/pages/components/cards.php b/public_html/pages/components/callout.php
similarity index 77%
rename from public_html/pages/components/cards.php
rename to public_html/pages/components/callout.php
index d183ee384c1f0e2dd31b14d252bb8b2f98738188..ce002314341c386980f4807b98e1d76b8945ff45 100644
--- a/public_html/pages/components/cards.php
+++ b/public_html/pages/components/callout.php
@@ -1,30 +1,24 @@
 <?php 
 
 $aCard=[
-    'type'=>'primary',
-    'variant'=>'fill',
-    'title'=>'I am a card',
-    'tools'=>'123',
-    'text'=>'Hello everybody out there!',
-    'footer'=>'&copy; Axel',
+    'type'=>'success',
+    'title'=>'I am a success callout',
+    'text'=>'This is a gren callout.',
 ];
 
 
 echo $renderAdminLTE->addRow(
-    '<h2>Cards</h2>'
+    '<h2>Callouts</h2>'
 )
 .$renderAdminLTE->addRow(
     '<h3>Syntax</h3>
     <pre>
-    echo $renderAdminLTE->getCard($aOptions)
+    echo $renderAdminLTE->getCallout($aOptions)
     </pre>
     '
 )
 
-// .showExample('"hello"')
-// .showExample('"'.var_export($aCard, 1).'"')
-
-.showExample('$renderAdminLTE->getCard('.var_export($aCard, 1).')')
+.showExample('$renderAdminLTE->getCallout('.var_export($aCard, 1).')')
 
 /*
 .$renderAdminLTE->addRow(
diff --git a/public_html/pages/components/card.php b/public_html/pages/components/card.php
new file mode 100644
index 0000000000000000000000000000000000000000..3b06850d674e1284de4d921c6b6c20f2faadd25f
--- /dev/null
+++ b/public_html/pages/components/card.php
@@ -0,0 +1,24 @@
+<?php 
+
+$aOptions=[
+    'type'=>'primary',
+    'variant'=>'solid',
+    'title'=>'I am a card',
+    'tools'=>'123',
+    'text'=>'Hello everybody out there!',
+    'footer'=>'&copy; Axel',
+];
+
+
+echo $renderAdminLTE->addRow(
+    '<h2>Card</h2>'
+)
+.$renderAdminLTE->addRow(
+    '<h3>Syntax</h3>
+    <pre>
+    echo $renderAdminLTE->getCard($aOptions)
+    </pre>
+    '
+)
+.showExample('$renderAdminLTE->getCard('.var_export($aOptions, 1).')')
+;
\ No newline at end of file