See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentscomponents
Detail page header is used to label the page and act as a form of navigation.
The basic header contains a page title and a back arrow.
<header class='bx--detail-page-header--no-tabs'>
<a href='#' class='bx--detail-page-header--no-tabs__link-wrapper'>
<svg class='bx--detail-page-header--no-tabs__arrow'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#arrow--left'></use>
</svg>
<p class='bx--detail-page-header--no-tabs__link-text'>Back</p>
</a>
<p class='bx--detail-page-header--no-tabs__info-title'>Detail page header</p>
</header>
An expanded version of the header includes a breadcrumb title, page title, and tabs to be used as a navigational element.
<header class='bx--detail-page-header--with-tabs'>
<div class='bx--detail-page-header--with-tabs__container'>
<div class='bx--detail-page-header--with-tabs__breadcrumb'>
<a href='#' class='bx--detail-page-header--with-tabs__link-wrapper'>
<svg class='bx--detail-page-header--with-tabs__arrow'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#arrow--left'></use>
</svg>
<p class='bx--detail-page-header--with-tabs__breadcrumb-title'>Breadcrumb title</p>
</a>
</div>
<div class='bx--detail-page-header--with-tabs__info'>
<p class='bx--detail-page-header--with-tabs__info-title'>Detail page header</p>
</div>
</div>
<div class='bx--detail-page-header--with-tabs__tabs-container'>
<nav data-tabs class='bx--tabs' role='navigation'>
<div class='bx--tabs__trigger'>
<a href='javascript:void(0)' class='bx--tabs__trigger-text'></a>
<svg><use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#caret--down'></use></svg>
</div>
<ul class='bx--tabs__nav bx--tabs--hidden' role='tablist'>
<li class='bx--tabs__nav-item bx--tabs--selected' data-target='.demo--panel--overview' role='presentation'><a id='tab-link-1' class='bx--tabs__nav-link' href='javascript:void(0)' role='tab' aria-controls='tab-panel-1' aria-selected='true'>Subtab 1</a></li>
<li class='bx--tabs__nav-item' data-target='.demo--panel--containers' role='presentation'><a id='tab-link-2' class='bx--tabs__nav-link' href='javascript:void(0)' role='tab' aria-controls='tab-panel-2' aria-selected='false'>Subtab 2</a></li>
<li class='bx--tabs__nav-item' data-target='.demo--panel--connected' role='presentation'><a id='tab-link-3' class='bx--tabs__nav-link' href='javascript:void(0)' role='tab' aria-controls='tab-panel-3' aria-selected='false'>Subtab 3</a></li>
<li class='bx--tabs__nav-item' data-target='.demo--panel--manage' role='presentation'><a id='tab-link-4' class='bx--tabs__nav-link' href='javascript:void(0)' role='tab' aria-controls='tab-panel-4' aria-selected='false'>Subtab 4</a></li>
<li class='bx--tabs__nav-item' data-target='.demo--panel--api-reference' role='presentation'><a id='tab-link-5' class='bx--tabs__nav-link' href='javascript:void(0)' role='tab' aria-controls='tab-panel-5' aria-selected='false'>Subtab 5</a></li>
</ul>
</nav>
</div>
</header>