UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Header

Last update:
()
Message fix(header): flex in IE 11
Committer: dkocsis
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
.e-header 

<div class="e-header">
  <h1>
    Elit id cupidatat nisi excepteur mollit 
  </h1>
  <a href="#0" class="e-header__back">
    Go to Overview
  </a>
</div>


                                <div class="e-header">
                                  <h1>Nulla consequat aliqua fugiat laborum esse 
                                  </h1><a href="#0" class="e-header__back">Go to Overview</a>
                                </div>

Cupidatat dolor elit enim et ex

Go to Overview

Variations

With button
Copy Jade
Copy HTML
Show code
Hide code
.e-header-flex and .e-header__button 

<div class="e-header e-header-flex">
  <e-tooltip content="Go to overview" placement="bottom-start">
    <div class="e-header__parentlink e-svgclickfix">
      <e-icon icon="e-move-left" size="small"></e-icon>
    </div>
  </e-tooltip>
  <h1>
    Qui tempor deserunt in eu id voluptate non laboris sit 
  </h1>
  <div class="e-header__button">
    <div class="e-buttongroup">
      <button class="e-btn e-btn-primary">
        Call to action
      </button>
      <e-dropdown data-markup-content="&lt;e-icon icon='dots'&gt;&lt;/e-icon&gt;" data-markup-class="e-btn e-btn-onlyicon e-btn-borderless" data-markup-class-active="e-btn-active">
        <div class="e-dropdown__content">
          <a href="#0" class="e-dropdown__item">
            <e-icon icon="pencil" type="table"></e-icon>
             Lorem ipsum
          </a>
          <a href="#0" class="e-dropdown__item">
            <e-icon icon="eye" type="table"></e-icon>
             Dolor sit amet
          </a>
        </div>
      </e-dropdown>
    </div>
  </div>
</div>


                                  <div class="e-header e-header-flex">
                                    <e-tooltip content="Go to overview" placement="bottom-start">
                                      <div class="e-header__parentlink e-svgclickfix">
                                        <e-icon icon="e-move-left" size="small"></e-icon>
                                      </div>
                                    </e-tooltip>
                                    <h1>Commodo id qui adipiscing ut sint eu in sint sit 
                                    </h1>
                                    <div class="e-header__button">
                                      <div class="e-buttongroup">
                                        <button class="e-btn e-btn-primary">Call to action</button>
                                        <e-dropdown data-markup-content="&lt;e-icon icon='dots'&gt;&lt;/e-icon&gt;" data-markup-class="e-btn e-btn-onlyicon e-btn-borderless" data-markup-class-active="e-btn-active">
                                          <div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
                                              <e-icon icon="pencil" type="table"></e-icon> Lorem ipsum</a><a href="#0" class="e-dropdown__item">
                                              <e-icon icon="eye" type="table"></e-icon> Dolor sit amet</a></div>
                                        </e-dropdown>
                                      </div>
                                    </div>
                                  </div>

Reprehenderit laborum cillum proident amet ut deserunt magna pariatur labore

Lorem ipsum Dolor sit amet

With button
Copy Jade
Copy HTML
Show code
Hide code
.e-header-flex and .e-header__button 

<div class="e-header e-header-flex">
  <h1>
    Ad ullamco ad ad veniam est amet ut ut sed 
  </h1>
  <div class="e-header__button">
    <div class="e-buttongroup">
      <button class="e-btn e-btn-primary">
        Call to action
      </button>
      <button class="e-btn">
        Button
      </button>
      <button class="e-btn e-btn-link">
        Go to overview
      </button>
    </div>
  </div>
</div>


                                  <div class="e-header e-header-flex">
                                    <h1>Id non ut ipsum quis nostrud veniam laborum veniam magna 
                                    </h1>
                                    <div class="e-header__button">
                                      <div class="e-buttongroup">
                                        <button class="e-btn e-btn-primary">Call to action</button>
                                        <button class="e-btn">Button</button>
                                        <button class="e-btn e-btn-link">Go to overview</button>
                                      </div>
                                    </div>
                                  </div>

Excepteur sint ut eu do in mollit velit sunt aliqua

Without H1
Copy Jade
Copy HTML
Show code
Hide code
.e-header__title 

<div class="e-header">
  <div class="e-header__title">
    Qui tempor irure in sunt laboris 
  </div>
  <a href="#0" class="e-header__back">
    Go to Overview
  </a>
</div>


                                  <div class="e-header">
                                    <div class="e-header__title">Amet in voluptate lorem culpa do 
                                    </div><a href="#0" class="e-header__back">Go to Overview</a>
                                  </div>
In sed pariatur cupidatat in culpa
Go to Overview

Related components

Button groupButtonDropdown