Header

Default .e-header

Minim ullamco eu adipiscing eiusmod cillum

Go to Overview
<div class="e-header">
  <h1>
    Aliqua commodo est est cillum lorem 
  </h1>
  <a href="#0" class="e-header__back">
    Go to Overview
  </a>
</div>

                        <div class="e-header">
                          <h1>Dolore magna aute aliqua deserunt consequat 
                          </h1><a href="#0" class="e-header__back">Go to Overview</a>
                        </div>

Variations

With button .e-header-flex and .e-header__button

Et dolore aliquip amet esse laboris sed velit commodo tempor

<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>
    Ut esse dolor reprehenderit officia dolor deserunt fugiat dolor magna 
  </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>Labore est ut nisi consectetur labore ut id commodo officia 
                            </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>

With button .e-header-flex and .e-header__button

Eu veniam laborum exercitation dolore velit voluptate occaecat minim sint

<div class="e-header e-header-flex">
  <h1>
    Labore excepteur quis ea officia nostrud sint est consectetur dolore 
  </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>Nulla minim pariatur proident magna anim ad ut dolor sint 
                            </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">
  <ul class="e-breadcrumb">
    <li class="e-breadcrumb__item">
      <a href="#0" class="e-breadcrumb__name">
        Campaigns
      </a>
    </li>
    <li class="e-breadcrumb__item">
      <a href="#0" class="e-breadcrumb__name">
        SMS Campaigns
      </a>
    </li>
    <li class="e-breadcrumb__item">
      <a href="#0" class="e-breadcrumb__name">
        Create SMS Message
      </a>
    </li>
  </ul>
  <a href="#0" class="e-header__back">
    Go to Overview
  </a>
</div>

                          <div class="e-header">
                            <ul class="e-breadcrumb">
                              <li class="e-breadcrumb__item"><a href="#0" class="e-breadcrumb__name">Campaigns</a></li>
                              <li class="e-breadcrumb__item"><a href="#0" class="e-breadcrumb__name">SMS Campaigns</a></li>
                              <li class="e-breadcrumb__item"><a href="#0" class="e-breadcrumb__name">Create SMS Message</a></li>
                            </ul><a href="#0" class="e-header__back">Go to Overview</a>
                          </div>

Without H1 .e-header__title

Voluptate ex labore sed esse nisi
Go to Overview
<div class="e-header">
  <div class="e-header__title">
    Et reprehenderit fugiat nisi amet incididunt 
  </div>
  <a href="#0" class="e-header__back">
    Go to Overview
  </a>
</div>

                          <div class="e-header">
                            <div class="e-header__title">Anim exercitation laborum deserunt laborum sit 
                            </div><a href="#0" class="e-header__back">Go to Overview</a>
                          </div>

Related components

Button groupButtonDropdown

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history