フローティングアクションボタン

フローティングアクションボタン（FAB）は、プロモーションのためのアクションに使用されます。丸いアイコンがUIの上に浮かんでいるのが特徴で、モーフィング、起動、アンカーポイントの移動などのモーションビヘイビアがあります。

FABのレイアウト

フローティングアクションボタンのレイアウトはとてもシンプルです。ただ、pageやviewの直系の子として配置するだけです。

<!-- ページ-->
<div class="page">
  <!-- ナビゲーションバー-->
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="center">Floating Action Button</div>
    </div>
  </div>
  <!-- フローティングアクションボタン -->
  <div class="fab fab-right-bottom">
    <a href="#">
      <i class="icon f7-icons">plus</i>
    </a>
  </div>
  <!-- 別のフローティングアクションボタン -->
  <div class="fab fab-left-bottom">
    <a href="#">
      <i class="icon f7-icons">plus</i>
    </a>
  </div>
  <!-- スクロール可能なページコンテンツ-->
  <div class="page-content">
    <div class="block">
      Lorem ipsum dolor sit amet, ....
    </div>
  </div>
</div>

FABの位置は、追加のfab-[horizontal]-[vertical]クラスで設定します。以下のクラスが用意されています。

fab-right-bottom (右下)
fab-center-bottom (ファブセンターボトム)
fab-left-bottom (左下)
fab-right-center (ファブライトセンター)
fab-center-center (中央)
fab-left-center fab-left-center
fab-right-top （右上）。
fab-center-top (センタートップ)
fab-left-top (左上)

FABのカラー

FABはすべてのデフォルトカラーをサポートしています。FABの色を変更するには、FAB要素にcolor-[color]クラスを追加するだけです。

<!-- 赤のFAB -->
<div class="fab fab-left-top color-red"></div>

<!-- グリーンFAB -->
<div class="fab fab-right-bottom color-green"></div>

拡張FAB

拡張FABは幅が広く、テキストラベルを含んでいます。拡張FABを作るには、FAB要素にfab-extendedクラスを追加して、その中の<div class="fab-text">要素に追加のテキストを入れる必要があります。

<!-- fab-extendedクラスの追加 -->
<div class="fab fab-extended fab-center-bottom">
  <a href="#">
    <i class="icon f7-icons">plus</i>
    <!-- FABテキストを含む要素  -->
    <div class="fab-text">Create</div>
  </a>
</div>

スピードダイヤル

フローティングアクションボタンは、押すと関連するアクションを実行します。メニューが表示された後も、ボタンは画面上に残ります。同じ場所をタップすると、最もよく使われるアクションを起動するか、開いているメニューを閉じる必要があります。

この場合、ボタンを持つ追加要素を追加する必要があります。

<div class="fab fab-right-bottom">
  <a href="#">
    <!-- 1つ目のアイコンは、スピードダイヤルのアクションが閉じているときに表示されます。 -->
    <i class="icon f7-icons">plus</i>
    <!-- 2つ目のアイコンは、スピードダイヤルのアクションを開いたときに表示されます。 -->
    <i class="icon f7-icons">xmark</i>
  </a>
  <!-- スピードダイヤルのアクションボタン -->
  <div class="fab-buttons fab-buttons-bottom">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

スピードダイヤルのボタンのコンテナの位置は、追加のクラスで設定します。

fab-buttons-top - ボタンは FAB の上部に表示されます。
fab-buttons-right - ボタンは、FABの右側に表示されます。
fab-buttons-bottom - FABの下側にボタンが表示されます。
fab-buttons-left - FABの左にボタンが表示されます。
fab-buttons-center - FABの周囲にボタンが表示されます。

スピードダイヤルのアクションボタンは、逆の順序で表示されることに注意してください。
6つ以上の短縮ダイヤルアクションを使用するべきではありません。
少なくとも3つの短縮ダイヤルアクションを使用する必要があります。

スピードダイヤルとラベル

スピードダイヤルボタンは、追加のテキストラベルもサポートしています。この場合、レイアウトが少し拡張されます。

<div class="fab-buttons fab-buttons-bottom">
  <!-- fabボタンに「fab-label-button」クラスを追加します。 -->
  <a href="#" class="fab-label-button">
    <!-- オリジナルのボタンコンテンツ -->
    <span>1</span>
    <!-- ボタンのラベル -->
    <span class="fab-label">Action 1</span>
  </a>
  <a href="#" class="fab-label-button">
    <span>2</span>
    <span class="fab-label">Action 2</span>
  </a>
  ...
</div>

背景付きスピードダイヤル

FABを開くと見えるようになる背景（半透明のオーバーレイ）を、FABの後ろに追加することも可能です。

これを実現するには、FAB要素と同じレベルに背景要素を追加する必要があります。

<div class="page">
  <!-- FABバックドロップ -->
  <div class="fab-backdrop"></div>

  <!-- FAB -->
  <div class="fab fab-right-bottom">
    ...
  </div>

  <div class="page-content">
    ...
  </div>
</div>

FABのモーフ

FABがページ上の任意の可視要素にモーフする機能もあります。

<div class="page">
  <div class="navbar">...</div>

  <!-- ツールバーには "fab-morph-target "クラスが追加で必要です。 -->
  <div class="toolbar toolbar-bottom fab-morph-target">
    ...
  </div>

  <!-- FABはツールバーにモーフします。 -->
  <div class="fab fab-morph" data-morph-to=".toolbar">
    <i class="icon f7-icons">plus</i>
  </div>

  <div class="page-content">
    ...
  </div>
</div>

構造

data-morph-to - ターゲット要素のCSSセレクタが指定されなければならないFABの追加属性です。この例では、Toolbarを指しています。
fab-morph-target - FABのモーフターゲットに必要な追加のクラスで、この例ではToolbarに追加されています。

FABアプリのメソッド

FABをコントロールするために、以下のアプリのメソッドを使うことができます。

app.fab.open(fabEl, targetEl)	FABのスピードダイヤルアクション/ボタンを開く、または指定したターゲットにモーフさせる fabEl - 必要なFABのHTMLElementまたはstring (with CSS Selector) targetEl - FABモーフのターゲットのHTMLElementまたはstring(CSS Selector付き)です。オプション
app.fab.close(fabEl)	FABスピードダイヤルのアクション/ボタンを閉じるか、指定されたターゲットからモーフを戻す fabEl - 必要なFABのHTMLElementまたはstring (with CSS Selector)
app.fab.toggle(fabEl)	FABスピードダイヤルの動作/ボタンを切り替える fabEl - 必要なFABのHTMLElementまたはstring（CSSセレクタ付き）。

FABのイベント

FABは、FAB要素で以下のDOMイベントを発生させます。

Event	Target	Description
fab:open	FAB Element<div class="fab">	イベントはFABオープン時、またはターゲット要素にモーフィングされた時に発生します。
fab:close	FAB Element<div class="fab">	イベントは、FABのクローズ時、またはターゲット要素からモーフィングされて戻ってきた時に発生します。

リンクによるFABの制御

リンクの特別なクラスとデータ属性を使用して、必要なFAB（DOMにある場合）を開いたり閉じたりすることができます。

FABスピードダイアルのアクションを開くには、任意のHTML要素（linkに好ましい）にfab-openクラスを追加する必要があります。
FABスピードダイアルを閉じたり、FABをターゲットからモーフィングで戻したりするには、任意のHTML要素に「fab-close」クラスを追加する必要があります（リンクであることが望ましい）。
もし、DOMに複数のFABがある場合は、このHTML要素に追加のdata-fab=".some-fab"属性を使って、適切なFABを指定する必要があります。

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-fab-margin: 16px;
  --f7-fab-text-color: #fff;
  --f7-fab-extended-text-font-size: 14px;
  --f7-fab-extended-text-padding: 0 20px;
  --f7-fab-label-bg-color: #fff;
  --f7-fab-label-text-color: #333;
  --f7-fab-label-border-radius: 4px;
  --f7-fab-label-padding: 4px 12px;
  --f7-fab-label-font-size: inherit;
  --f7-fab-button-size: 40px;
  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
}
.ios {
  --f7-fab-size: 50px;
  --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  --f7-fab-extended-size: 50px;
  --f7-fab-extended-text-font-weight: 600;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.md {
  --f7-fab-size: 56px;
  --f7-fab-box-shadow: var(--f7-elevation-6);
  --f7-fab-extended-size: 48px;
  --f7-fab-extended-text-font-weight: 500;
  --f7-fab-extended-text-letter-spacing: 0.05em;
  --f7-fab-label-box-shadow: var(--f7-elevation-3);
}
.aurora {
  --f7-fab-size: 56px;
  --f7-fab-box-shadow: var(--f7-elevation-6);
  --f7-fab-extended-size: 48px;
  --f7-fab-extended-text-font-weight: 600;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

Examples

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Floating Action Button</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom fab-morph-target">
    <div class="toolbar-inner">
      <a class="link fab-close">Link 1</a>
      <a class="link fab-close">Link 2</a>
      <a class="link fab-close">Link 3</a>
    </div>
  </div>
  <div class="fab fab-left-top color-yellow">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-bottom">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-right-top color-pink">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-left">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-center-center color-green">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-center">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
    </div>
  </div>
  <div class="fab fab-left-bottom fab-morph" data-morph-to=".toolbar">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
  </div>
  <div class="fab fab-right-bottom color-orange">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
      <a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
    </div>
  </div>
  <div class="fab fab-extended fab-center-bottom color-red">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
      <div class="fab-text">Create</div>
    </a>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
    </div>
  </div>

With Backdrop

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">FAB Backdrop</div>
    </div>
  </div>
  <div class="fab-backdrop"></div>
  <div class="fab fab-right-bottom">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
      <a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
    </div>
  </div>
</div>