Two rows of text on a button

In the help screen of an app based on JQuery Mobile, we have a layout shown in the following screen grab:
buttons
We’re trying to duplicate this in Framework7 and we’re failing dismally. Here’s what we’ve tried:

<div id="helpPage" class="page"  data-name="help">
  <div class="page-content">
    <center><h2>Help</h2></center>
    <div class="block">
      <div class="row">
        <a href="/tutorial/" class="col button button-fill">
          <div class="item-media">
            <i class="fas fa-user-graduate"></i>
          </div>                
          <div class="item-inner">
            <div class="item-title">View<br>Tutorial</div>
          </div>
        </a>
        <a href="/privacy/" class="col button button-fill">
          <div class="item-media">
            <i class="fas fa-eye"></i>
          </div>                
          <div class="item-inner">
            <div class="item-title">Privacy<br>Policy</div>
          </div>
        </a>
        <!-- 
        <a href="/tutorial/" class="help col button button-fill button-large fas fa-user-graduate">&nbsp;View<br>Tutorial</a>
        <a href="/privacy/" class="help col button button-fill button-large fas fa-eye">&nbsp;Privacy<br>Policy</a>
        -->        
      </div>
      <br>
      <div class="row">
        <a href="/feedback/" class="col button button-fill button-large"><i class="far fa-comments"></i>Send<br>Feedback</a>
        <a href="/errors/" class="col button button-fill button-large"><i class="fas fa-times"></i>Error<br>Codes</a>
      </div>
      <br>
      <div class="row">
        <a href="/about/" class="col button button-fill fas fa-info">&nbsp;About<br>Us</a>
      </div>
    </div>      
    <div class="block">
      <div class="row">
        <h4>Removed After Testing</h4>
        <a href="/welcome.html/1/" class="col button button-fill color-blue fas fa-heart">Rerun Onboarding</a>          
      </div>
    </div>
  </div>
</div>

Anyone have any suggestions on how to accomplish this? Or perhaps have another solution (other than one column of 5 rows of buttons).

Thanks.

If anyone is looking, F7 doesn’t support this directly (at least not that I’ve found) so I cobbled this together to get the job done:

      <div class="row">
        <a href="/tutorial/" class="col">
          <section class="help_button">
              <div class="help_icon"><i class="fas fa-user-graduate"></i></div>
              <div class="help_text">View<br>Tutorial</div>
          </section>
        </a>
        <a href="/privacy/" class="col">
          <section class="help_button">
              <div class="help_icon"><i class="fas fa-eye"></i></div>
              <div class="help_text">Privacy<br>Policy</div>
          </section>
        </a>

css

.help_button {
    width: 100%;
    height: 5em;
    background: blue;
    margin: auto;
    padding: 0;
}
.help_icon {
  margin-right:0;
  width: 25%;
  height: 100%;
  color: white;
  float: left;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.help_text {
    margin-left: 0;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

You could just increase button height on these buttons. But to be honest such things are not mobile friendly and can’t really remember any app that have such multirow buttons. What is wrong with List? This is specifically designed for such things

I tried increasing the button size first thing. Also tried button-large. For now its working but I may port it over to the list on Monday. (for speed I’m just trying to do as much of a one-to-one port as possible.)