diff --git a/public_html/inc_functions.php b/public_html/inc_functions.php
index 6a98c305452da030c02922778c9621c910c8ae6d..39dd224754f90c73b1090c3cbd4e8a97f11bac54 100644
--- a/public_html/inc_functions.php
+++ b/public_html/inc_functions.php
@@ -18,22 +18,28 @@ function showExample($sPhpcode){
                 <tr>
                     <th>Source</th>
                     <th>Output</th>
-                    <th>Generated html code</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td>
-                    <div class="language-php max-height-300 highlighter-rouge"><div class="highlight">
-                        <pre class="highlight">'.htmlentities($sPhpcode).'</pre>
-                    </div></div>
-                    </td>
-                    <td>
-                        '.$sOut.'
-                    </td>
-                    <td>
-                        <pre>'.htmlentities(str_replace([">", "</", "\n\n" ], [">\n", "\n</", "\n"], $sOut)).'</pre>
-                    </td>
+                <td>
+                    <pre class="highlight">'.
+                        str_replace(
+                            ['array (', '))'], 
+                            ['array (<span class="params">', '</span>))'], 
+                            htmlentities($sPhpcode))
+                        .'</pre>
+                </td>
+                <td>
+                    '.$sOut.'<br><br>
+                    <pre>'.
+                        str_replace(
+                            ['&gt;', '&lt;'], 
+                            ['&gt;<span class="output">', '</span>&lt;'], 
+                            htmlentities(str_replace([">", "</", "\n\n" ], [">\n", "\n</", "\n"], $sOut))
+                        )
+                        .'</pre>
+                </td>
                 </tr>
             </tbody>
         </table>
diff --git a/public_html/pages/component.php b/public_html/pages/component.php
index c778d7c3b9719667c1b1b90c473865a12f3ebf87..0043e2b3386dad3a7239cd6ebbdcba99c88c7467 100644
--- a/public_html/pages/component.php
+++ b/public_html/pages/component.php
@@ -54,6 +54,23 @@ $aPresets=[
         'xs'=>'',
         'flat'=>'',
     ],
+    'variant'=>[
+        ''=>'no value',
+        'outline'=>'small stripe on top',
+        'solid'=>'',
+        'gradient'=>'',
+    ],
+    'visibility'=>[
+        ''=>'no value', 
+        '0'=>'hide', 
+        '1'=>'show',
+    ],
+    // for keys: state
+    'windowstate'=>[
+        ''=>'no value', 
+        'collapsed'=>'header only', 
+        'maximized'=>'full window',
+    ],
     // for keys: dismissable
     'yesno'=>[
         ''=>'no value', 
@@ -76,8 +93,8 @@ $aComponents=[
         'params'=>[
             'type'        => ['select'=>$aPresets['type'],     'default'=>'warning'],
             'dismissible' => ['select'=>$aPresets['yesno'],    'default'=>''],
-            'title'       => ['default'=>'I need your attention'],
-            'text'        => ['default'=>'Please check it. Maybe there is something wrong here.'],
+            'title'       => ['default'=>'Alert title'],
+            'text'        => ['default'=>'I am a message. Read me, please.'],
         ]
     ],
     // ------------------------------------------------------------
@@ -121,6 +138,30 @@ $aComponents=[
         ]
     ],
     // ------------------------------------------------------------
+    'card'=>[
+        'label'=>'Callout',
+        'description'=>'Content box with header, text, footer',
+        'method'=>'getCard',
+
+        'params'=>[
+            'variant'     => ['select'=>$aPresets['variant'],  'default'=>''],
+            'type'        => ['select'=>$aPresets['type'],     'default'=>'danger'],
+            'class'       => ['default'=>''],
+            'state'       => ['select'=>$aPresets['windowstate'], 'default'=>''],
+
+            'tb-collapse' => ['select'=>$aPresets['visibility'], 'default'=>''],
+            'tb-expand'   => ['select'=>$aPresets['visibility'], 'default'=>''],
+            'tb-maximize' => ['select'=>$aPresets['visibility'], 'default'=>''],
+            'tb-minimize' => ['select'=>$aPresets['visibility'], 'default'=>''],
+            'tb-remove'   => ['select'=>$aPresets['visibility'], 'default'=>''],
+
+            'title'       => ['default'=>'I am a card'],
+            'tools'       => ['default'=>'Tools'],
+            'text'        => ['default'=>'Here is some beautiful content.'],
+            'footer'      => ['default'=>'Footer'],
+        ]
+    ],
+    // ------------------------------------------------------------
     'infobox'=>[
         'label'=>'Infobox',
         'description'=>'',
@@ -179,8 +220,8 @@ if(!isset($aComponents[$sComponent])){
                 .($sValue==$sSelectItem ? ' selected="selected"' : '')
                 .'>'.$sSelectItem .' -> '. $sLabel.'</option>';
             }
-            $sInput='<select size="1" name="'.$sOptionkey.'" onchange="form.submit();">'.$sInput.'</select>'
-                .' <button name="doloop" value="'.$sOptionkey.'">Loop</button><br>';
+            $sInput='<nobr><select size="1" name="'.$sOptionkey.'" onchange="form.submit();">'.$sInput.'</select>'
+                .' <button name="doloop" value="'.$sOptionkey.'">Loop</button><nobr>';
 
            
         } else {
diff --git a/public_html/ui/main.css b/public_html/ui/main.css
index 6648c9649822cc07622cb6b01c4c8f9cedc74351..6f105f0a00a416d899048c8f82cc2fbfa455177f 100644
--- a/public_html/ui/main.css
+++ b/public_html/ui/main.css
@@ -1,2 +1,4 @@
 
-pre{background-color: #445; color: #f8f8f8};
\ No newline at end of file
+pre{background-color: #445; color: #f8f8f8}
+pre .params{color: #acc}
+pre .output{color: #aaf}
\ No newline at end of file