<nav class="font_0  flex_auto font_ui p-t_2 p-t_3:lg m-b_4 max-w_40">
   <h2
      class="capitalize br-b_1 br_dotted br_accent c_accent font_bold font_0 font_1:lg font_display m-b_0 m-t_0 p-b_2 p-t_3 p-x_4">
      featured tools
   </h2>
   <ul class="font_0:lg font_n1 lh_2 ul_none">
      <li class="flex p_2 h:bg_secondary-5 relative">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-file p-y_2 inline-block fa-fw c_black-7" data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink h:underline-none m_0 lh_1 expanded-click-area lh_1  c_primary h:c_primary-n2 ">The
               title of the tool which can be very long
            </a>
         </div>
      </li>
      <li class="flex p_2 h:bg_secondary-5 relative br-t_1 br_dotted br_secondary-4">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-prescription-bottle-alt p-y_2 inline-block fa-fw c_black-7"
                  data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink h:underline-none m_0 lh_1 expanded-click-area lh_1  c_primary h:c_primary-n2 ">The
               some other tools that has meaning
            </a>
         </div>
      </li>
   </ul>
   <a class="block br-t_1 br_0 br_dotted br_none br_accent c_primary float_right font_n1 link p-x_3 p_2 text_right w_100"
      href="#"><i class="fas fa-plus-square p-r_3 "></i>show more tools</a>
</nav>