Highlighter

これはとっても重要なことです。

これもまた重要です。

きっと重要なことにちがいありません

重要なのはマーカーだけじゃない

<div>
  <span class="af-hl__marker">これはとっても重要なことです。</span>
</div>
<div>
  <span class="af-hl__marker -color-green">これもまた重要です。</span>
</div>
<div>
  <span class="af-hl__marker -color-yellow">きっと重要なことにちがいありません</span>
</div>

<div>
  <span class="af-hl__dotted-underline">重要なのはマーカーだけじゃない</span>
</div>

Balloon

あいづちを10パターンくらいマスターしたんだ。

なるほどですね。仕事ができるように見えますね

<div class="af-balloon -side-left">
  <img class="af-balloon__avatar" src="https://3.bp.blogspot.com/-1LXBe86Lrs8/Vf-artgLU6I/AAAAAAAAyJE/i5zNuMDWXWo/s800/icon_business_man13.png" />
  <div class="af-balloon__text">あいづちを10パターンくらいマスターしたんだ。</div>
</div>
<div class="af-balloon -side-right">
  <img class="af-balloon__avatar" src="https://3.bp.blogspot.com/-ZtTMnGSjfzk/VaMOAsBo5FI/AAAAAAAAvhc/9TSiB9xAAx4/s800/youngwoman_44.png" />
  <div class="af-balloon__text">なるほどですね。仕事ができるように見えますね</div>
</div>

Ranking

第1位

ぴえん

<div class="af-rank" style="max-width: 600px;">
  <div class="af-rank__badge">第1位</div>
  <div class="columns">
    <div class="column">
      <img src="https://1.bp.blogspot.com/-jlZlCg-8FAM/Xub_u8HTD1I/AAAAAAABZis/ZhUI05AZBEQpVinedZ6Xy-eIucmNuY2SQCNcBGAsYHQ/s1600/pose_pien_uruuru_man.png" width="200"/>
    </div>
    <div class="column">
      <h4>ぴえん</h4>
    </div>
  </div>
</div>

TL;DR

仕事ができる人が使うビジネス用語3選

ケースバイケースですね
出来ないかといえば嘘になる
GAFAに勝てますね

<div class="af-tldr" style="max-width: 700px;">
  <div class="af-tldr__title">仕事ができる人が使うビジネス用語3選</div>
  <div class="af-tldr__content">
    <ul>
      <li>ケースバイケースですね</li>
      <li>出来ないかといえば嘘になる</li>
      <li>GAFAに勝てますね</li>
    </ul>
  </div>
</div>

Heading

リボン

下線

左線

<h4 class="af-heading__ribbon -color-green">リボン</h4>
<h4 class="af-heading__underline -color-green">下線</h4>
<h4 class="af-heading__leftline">左線</h4>