File: ./Proj.demo/card.page.php - ver:1.7.3
Open source - π˜“π˜π˜Šπ˜Œπ˜•π˜šπ˜Œ & 𝘊𝘰𝘱𝘺𝘳π˜ͺ𝘨𝘩𝘡 Β© 2019-2026 EV-soft *** See the file: LICENSE
Skip to the contentGo to the view tools

card.page.php



Test site and documentation for Clever html engine β€’ Errors may occur and future news may be shown β€’ ver.1.7.3: 78 core functions.

Htm_Card_() - a minimal cardTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
A card is htm_Card_() ... htm_Card_end() with your content in between. Click the header to fold the card.
My cardTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
The content of the card.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Show the codeHide the code 
htm_Card_(capt:'@My card', icon:'fas fa-star', clas:'cardW320');
    htm_TextDiv(body:'@The content of the card.');
htm_Card_end();
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. A form in the card - and the footerTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
With form: the card body is a form (POST, with the CSRF token). htm_Card_end(subm:true) puts a submit button in the footer, foot: a text. The footer stays below the scrolling body. Press Save - the card at the top shows what the server receives.
ContactTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Remember to save Remember to save here if you changed anything above, before leaving the window.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Show the codeHide the code 
htm_Card_(capt:'@Contact', icon:'fas fa-user', form:'contact', clas:'cardW400');
    htm_Input(labl:'@Name',  name:'name', valu:$_POST['name'] ?? '', wdth:'90%');
    htm_Input(labl:'@Email', name:'mail', valu:$_POST['mail'] ?? '', vrnt:'mail', wdth:'90%');
htm_Card_end(labl:'@Save', icon:'fas fa-floppy-disk', subm:true, foot:'@Remember to save');
kind: the color of the button - save, navi, goon, eras, crea, home, get_, put_, spc1, spc2. akey: the access key (Alt+key).
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. The headerTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
SimpleTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card.
simp: true
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. ColorsTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
head, fclr
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
frst
Left and rightTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card.
last
frst, last
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. HelpYour own hint on the caption
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card HELP:Click icon to goto custom help for this card: documentation.page.php
help, mode:1, hint
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. No buttonsWhen "Arrange cards" is on in the view bar: drag the header to move the card.
show:false, hint:'', poup:false
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Show the codeHide the code 
htm_Card_(capt:'@Simple', simp:true, clas:'cardW240');                                    # Only the centered caption
    htm_TextDiv(body:'simp: true');
htm_Card_end();
htm_Card_(capt:'@Colors', icon:'fas fa-palette', clas:'cardW240',
          head:'background-color:#1565c0;', fclr:'color:white;');                         # Header style and icon color
    htm_TextDiv(body:'head, fclr');
htm_Card_end();
htm_Card_(capt:'@Left and right', clas:'cardW240',
          frst:'<small>frst</small>', last:'<small>last</small>');                        # last replaces the buttons
    htm_TextDiv(body:'frst, last');
htm_Card_end();
htm_Card_(capt:'@Help', icon:'fas fa-life-ring', clas:'cardW240', mode:'1',
          help:'documentation.page.php', hint:'@Your own hint on the caption');          # ? icon, only the height button
    htm_TextDiv(body:'help, mode:1, hint');
htm_Card_end();
htm_Card_(capt:'@No buttons', clas:'cardW240', show:false, hint:'', poup:false);          # No buttons, no hint, no right-click menu
    htm_TextDiv(body:'show:false, hint:&#39;&#39;, poup:false');
htm_Card_end();
The buttons at the right (mode 2): toggle the height, toggle the width, close all cards, open all cards. Right-click a header: a menu for all cards (poup).
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. Size and foldingTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Starts foldedTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. Scrolling bodyTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
More content than the height (vhgh) - it scrolls.
More content than the height (vhgh) - it scrolls.
More content than the height (vhgh) - it scrolls.
More content than the height (vhgh) - it scrolls.
More content than the height (vhgh) - it scrolls.
More content than the height (vhgh) - it scrolls.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Show the codeHide the code 
htm_Card_(capt:'@Starts folded', icon:'fas fa-folder', clas:'cardW400',
          fold:'closed', wdth:'200px');                                                  # Folded: 200px wide - open: 400px
    htm_TextDiv(body:'fold: closed, wdth: 200px');
htm_Card_end();
htm_Card_(capt:'@Scrolling body', icon:'fas fa-scroll', clas:'cardW280', vhgh:'110px',
          styl:'background-color: #fffbe6;', attr:'border: 2px solid #e0a800; border-radius: 8px;');
    htm_TextDiv(body: str_repeat(lang('@More content than the height (vhgh) - it scrolls.').'<br>', 6), attr:'white-space: normal;');
htm_Card_end();
clas: the width - cardWmax (full), cardWaut (the content), cardW120 (1200px), cardW110, cardW100, cardW960, cardW800, cardW720, cardW640, cardW560, cardW480, cardW400, cardW320, cardW280, cardW240, cardW160. On a narrow screen the cards are placed below each other. vhgh: the max height of the body (none: no limit).
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. Cards in cards - and formsTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Cards can be nested. HTML does not allow a form in a form: inside a card with a form, the form of an inner card is not made - its fields belong to the outer form. Press Save: both fields are sent.
Outer card (with a form)TOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Inner cardTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Remember to save here if you changed anything above, before leaving the window.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Show the codeHide the code 
htm_Card_(capt:'@Outer card (with a form)', icon:'fas fa-box-open', form:'outer', clas:'cardW560');
    htm_Input(labl:'@Outer field', name:'outer_f', valu:$_POST['outer_f'] ?? '', wdth:'90%');
    htm_Card_(capt:'@Inner card', icon:'fas fa-box', form:'inner', clas:'cardW480', poup:false);   # form: ignored (no nested forms)
        htm_Input(labl:'@Inner field', name:'inner_f', valu:$_POST['inner_f'] ?? '', wdth:'90%');
    htm_Card_end();
htm_Card_end(labl:'@Save', subm:true);
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. The HTML element (elem)TOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
A card is a span. elem: section, article, aside, main, header, footer or div - a semantic element gets the caption as its accessible name (aria-labelledby). The caption is a heading.
NewsTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
<article aria-labelledby=...>
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Show the codeHide the code 
htm_Card_(capt:'@News', icon:'fas fa-newspaper', clas:'cardW320', elem:'article');
    htm_TextDiv(body:'&lt;article aria-labelledby=...&gt;');
htm_Card_end();
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. Moving and resizing cardsTOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Move: drag a card to another place among its sibling cards (Alt + arrow up/down: one place). The order is remembered in this browser - the right-click menu has "Original card order".
How it is started is set with $gbl_CardMove (e.g. in project.init.php) - try it on this page:
$gbl_CardMove= 'icon'A handle in the header (default)$gbl_CardMove= 'header'Drag the header$gbl_CardMove= 'toggle'The view bar button Arrange cards$gbl_CardMove= falseOff
move:false on a card: it stays in place.
Resize: drag the grip in the lower right corner (or the arrow keys). Double-click or Home: the original size. $gbl_CardResize= false: no grip.
Keyboard: Tab to the header or a button, Enter or Space to use it. The hint is also shown on keyboard focus.
From JavaScript: CardMinimizeAll(), CardMaximizeAll() (close / open all cards), CardHeightAll(mode) and p2hCardMove.reset() (the original order).
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. All parameters of htm_Card_() and htm_Card_end()TOGGLE: Click icon or card header-text to open / close this card
When "Arrange cards" is on in the view bar: drag the header to move the card. TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Read from the library itself: the name, the default value and the description.
htm_Card_()
Parameter
Default
Type
Description
capt '' string The card caption
icon '' string Class: icon to the left of caption
hint 'tgl' string The hint on the caption ('tgl': "click to open / close this card", '': none)
mode '2' string The buttons: '0' none / '1' toggle the height / '2' also: toggle the width, close all, open all
form '' string The name (and id) of a form around the card body - '' no form. Not inside a card that has a form (no nested forms)
acti '' string The action of the form ('' this page). The form is POST, multipart, with the CSRF token
cardW960, cardW800, cardW720, cardW640, cardW560, cardW480, cardW400, cardW320, cardW280, cardW240, cardW160
wdth '' string The width of the folded card (a number is px), e.g. '240px' - '' the same width
vhgh '600px' string The max height of the body - more content scrolls ('none': no limit)
fclr '' string Extra style of the header icons and text, e.g. 'color:snow;'
styl 'background-color: white;' string Style of the card body
attr 'margin-bottom: 8px;' string Style of the card itself (the outer element)
clas 'cardWmax' string The width class: cardWmax (full), cardWaut (the content), cardW120 (1200px), cardW110, cardW100,
show true bool Show the buttons at the right in the header
poup true bool Right-click the header: a menu for all cards (heights, close / open all, original order)
head 'background-color: white;' string Style of the header
help '' string A link: a ? icon in the header opens it in a new window
frst '' string HTML at the left in the header (the caption is then centered)
last '' string HTML at the right in the header - it replaces the buttons (show/mode)
simp false bool A simple header: only the centered caption (no buttons, no frst/last)
fold '' string 'closed': the card starts folded (click the caption to open it)
elem 'span' string The HTML element of the card: span (default) / section / article / aside / main / header / footer / div
A semantic element (section...) gets the caption as its accessible name (aria-labelledby)
move true bool The card can be moved among its sibling cards (how: $gbl_CardMove) - false: it stays in place
rtrn false bool Return the HTML instead of echoing it
 htm_Card_end()
Parameter
Default
Type
Description
labl '' string The label of the submit button in the footer
icon '' string An icon left of the label
hint '' string The hint of the button ('' a reminder to save)
kind 'save' string The color of the button: save, navi, goon, eras, crea, home, get_, put_, spc1, spc2
name '' string (Only a comment after </form>)
form '' string The form to submit - in a card with its own form: always that form
attr '' string Attributes of the button
subm false bool A submit button in the footer - only in a card with its own form (form: in htm_Card_)
akey '' string Access key of the button (Alt+key)
simu false bool (Not used)
foot '' string Footer text (HTML, translated) - the footer stays below the scrolling body and is hidden with it when the card is folded
rtrn false bool Return the HTML instead of echoing it
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.