Header
basic
Header text
| Example | Title TextDescription text |
| HTML code | <DIV class="header">
<DIV class=icon><i class="fa fa-app-report"></i></DIV>
<DIV class=text>
<h1>Title Text</h1>
<p>Description text</p>
</DIV>
</DIV> |
| Type | molecule |
| Group | basic |
| Elements | title, description, icon |
PHP
Wrapper to use element through PHP
| Extends | eUiElement |
| Render | html |
| Create arguments | title, description, icon, style |
| Code example | Parameters as arguments$Header = $this->get('ui', 'header', 'Title', 'Description', 'app-report', 'small');Parameters as array$Header = $this->get('ui', 'header', Array(
'title' => 'Title',
'description' => 'Description'
'icon' => 'app-report'
));All parameters$Header = $this->get('ui', 'header', Array(
'title' => 'Title',
'description' => 'Description'
'icon' => 'app-report'
'color' => 'green'
'size' => 'large'
)); |
Javascript
Wrapper to use element through Javascript
| Code example | var $Header = cms.get('ui', 'header', {
icon: 'app-addnew'
title: 'Title',
description: 'Description',
color: 'green',
size: 'large'
menu: [{
icon: 'app-edit',
tooltip: '',
onclick: function(){}
}]
}); |
Styles
Elements Css style
| jumbo | JumboDescription text |
| large | LargeDescription text |
| normal | NormalDescription text |
| small | SmallDescription text |
| mini | MiniDescription text |
| justified | JustifiedDescription text vertically (used in mobile header) |
| no-border | No-borderDescription text |
| no-margin | No-marginDescription text |
| violet | VioletDescription text |
| purple | PurpleDescription text |
| indigo | IndigoDescription text |
| blue | BlueDescription text |
| azure | AzureDescription text |
| cyan | CyanDescription text |
| teal | TealDescription text |
| darkgreen | DarkgreenDescription text |
| green | GreenDescription text |
| lime | LimeDescription text |
| yellow | YellowDescription text |
| amber | AmberDescription text |
| orange | OrangeDescription text |
| darkorange | DarkorangeDescription text |
| red | RedDescription text |
| pink | PinkDescription text |
| brown | BrownDescription text |
| white | WhiteDescription text |
| lightgray | LightgrayDescription text |
| gray | GrayDescription text |
| darkgray | DarkgrayDescription text |
| black | BlackDescription text |
| success | SuccessDescription text |
| warning | WarningDescription text |
| danger | DangerDescription text |
| error | ErrorDescription text |
| info | InfoDescription text |
| muted | MutedDescription text |
| selected | SelectedDescription text |