HomeComponents

Page Header

Display information about current page (breadcrumbs, title, description).

Default

First Level linkSecond Level

Page Title

<!-- Page header -->
<div class="ui-header">

  <!-- see "ui-breadcrumbs" component for details of HTML markup -->
  <div class="ui-header__breadcrumbs">
    <div class="ui-breadcrumbs">...</div>
  </div>

  <!-- title should be "ui-heading--xl" medium -->
  <div class="ui-header__title">
    <h1 class="ui-heading--xl ui-heading--xl--medium">...</h1>
  </div>
</div>

With description

First Level linkSecond Level

Page Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque cupiditate ducimus earum error, illum minus, nihil nisi, perspiciatis quia quis quo recusandae rerum sed sunt totam ut vero voluptatem?
<!-- With description -->
<div class="ui-header">

  <div class="ui-header__breadcrumbs">
    <div class="ui-breadcrumbs">...</div>
  </div>

  <div class="ui-header__title">
    <h1 class="ui-heading--xl ui-heading--xl--medium">...</h1>
  </div>

  <div class="ui-header__description">...</div>
</div>

Without "eyebrow"

Page Title

Lorem ipsum dolor sit amet, connisi, perspiciatis quia quis quo recusandae rerum sed sunt totam ut vero voluptatem?
<!-- Without eyebrow -->
<div class="ui-header">

  <!-- even if no breadcrumbs are available, we must leave this empty element to fill the space (using CSS) -->
  <div class="ui-header__breadcrumbs"></div>

  <div class="ui-header__title">
    <h1 class="ui-heading--lg ui-heading--lg--bold">...</h1>
  </div>

  <div class="ui-header__description">...</div>
</div>

Title with optional tooltip

Page Title Only

<!-- Header without description -->
<div class="ui-header">
  <div class="ui-header__breadcrumbs"></div>
  <div class="ui-header__title">
    <h1 class="ui-heading--xl ui-heading--xl--medium">...</h1>

    <!-- use normal tooltip trigger (optional) -->
    <span class="ui-tooltip-icon" data-tooltip="...">
      <i class="ui-icon ui-icon--question ui-icon--medium"></i>
    </span>
  </div>
</div>

Title with button

First Level linkSecond Level

Page Title

<!-- With description -->
<div class="ui-header">

  <div class="ui-header__breadcrumbs">
    <div class="ui-breadcrumbs">...</div>
  </div>

  <div class="ui-header__title">
    <h1 class="ui-heading--xl ui-heading--xl--medium">...</h1>
    <button class="ui-btn ui-btn--small ui-btn--pill ui-btn--secondary">...</button>
  </div>
</div>

Title with button and optional tooltip

First Level linkSecond Level

Longer Page Title with button

<!-- With description -->
<div class="ui-header">

  <div class="ui-header__breadcrumbs">
    <div class="ui-breadcrumbs">...</div>
  </div>

  <div class="ui-header__title">
    <h1 class="ui-heading--xl ui-heading--xl--medium">...</h1>

    <button class="ui-btn ui-btn--small ui-btn--pill ui-btn--secondary">...</button>

    <!-- use normal tooltip trigger (optional) -->
    <span data-tooltip="...">
      <i class="ui-icon ui-icon--question ui-icon--medium"></i>
    </span>
  </div>
</div>

Title with description, button and tooltip

First Level linkSecond Level

Longer Page Title with button

Lorem ipsum dolor sit amet, connisi, perspiciatis quia quis quo recusandae rerum sed sunt totam ut vero voluptatem?
<!-- With description -->
<div class="ui-header">

  <div class="ui-header__breadcrumbs">
    <div class="ui-breadcrumbs">...</div>
  </div>

  <div class="ui-header__title">
    <h1 class="ui-heading--xl ui-heading--xl--medium">...</h1>

    <button class="ui-btn ui-btn--small ui-btn--pill ui-btn--secondary">...</button>

    <!-- use normal tooltip trigger (optional) -->
    <span data-tooltip="...">
      <i class="ui-icon ui-icon--question ui-icon--medium"></i>
    </span>
  </div>

  <div class="ui-header__description">...</div>
</div>
Refinitiv © 2020