Header ヘッダ · `kf-header`

画面の最上部。左にマーク + KAFUNE、続けて画面の切り替え、右端に誰として入っているか。

クラスKafune.brandHtmlkf-headerkf-navkf-who

HTML

<header class="kf-header" id="h"></header>
<script>
  document.getElementById('h').innerHTML = Kafune.brandHtml() +
    '<nav class="kf-nav"><a href="#" class="is-current">ホーム</a><a href="#">一覧</a><a href="#">履歴</a><a href="#">設定</a></nav>' +
    '<span class="kf-who">user@example.com</span>';
</script>

社名は window.Kafune.brandHtml()(マーク 20px + brand スタイルの文字)。アプリ名を添えるときは KAFUNE の右に ink-muted で小さく(例: KAFUNE 管理)。
現在地は is-current(文字 ink-strong、下線 2px accent)。
高さ 56px、左右の余白 space-8(スマホでは space-4)、下に line の 1px。影は付けない。
右端は kf-who(mono、ink-faint)。メールアドレスか名前。

Header ヘッダ · kf-header

Header ヘッダ · `kf-header`