Components

Text Content

Accordion

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium dolores magni, praesentium dicta quo ad mollitia vel sapiente vero, iste asperiores atque quisquam. Tenetur quos veniam harum aut? Fugiat, accusamus.

LAenean eget ultricies tortor. Mauris sed justo a dui gravida ultrices at quis nulla. Morbi eleifend tempus consectetur. Donec vitae lacinia purus. Cras velit nulla, cursus vel eleifend vitae, aliquam vel sapien. Donec vitae suscipit mauris, eu elementum risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam felis urna, ornare quis aliquet at, cursus ut ligula. Nam quam velit, suscipit vel cursus non, fringilla et ante.

Curabitur bibendum elit auctor metus efficitur hendrerit. Sed magna ligula, feugiat vel hendrerit eu, sagittis id orci. Sed interdum dapibus ligula sed fermentum. Curabitur eu lectus at mauris vehicula semper. Nunc maximus magna id vestibulum efficitur. Proin nec tristique enim, non dictum lectus.
                <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <p class="accordion-header" id="heading-1">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapseOne">
        Accordion item title 1
      </button>
    </p>
    <div id="collapse-1" class="accordion-collapse collapse" aria-labelledby="heading-1" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium dolores magni, praesentium dicta quo ad mollitia vel sapiente vero, iste asperiores atque quisquam. Tenetur quos veniam harum aut? Fugiat, accusamus.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="heading-2">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapseOne">
        Accordion item title 2
      </button>
    </p>
    <div id="collapse-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        LAenean eget ultricies tortor. Mauris sed justo a dui gravida ultrices at quis nulla. Morbi eleifend tempus consectetur. Donec vitae lacinia purus. Cras velit nulla, cursus vel eleifend vitae, aliquam vel sapien. Donec vitae suscipit mauris, eu elementum risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam felis urna, ornare quis aliquet at, cursus ut ligula. Nam quam velit, suscipit vel cursus non, fringilla et ante.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="heading-3">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapseOne">
        Accordion item title 3
      </button>
    </p>
    <div id="collapse-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Curabitur bibendum elit auctor metus efficitur hendrerit. Sed magna ligula, feugiat vel hendrerit eu, sagittis id orci. Sed interdum dapibus ligula sed fermentum. Curabitur eu lectus at mauris vehicula semper. Nunc maximus magna id vestibulum efficitur. Proin nec tristique enim, non dictum lectus.
      </div>
    </div>
  </div>
</div>

              

Tooltip

By default the tooltip is positioned below the parent. In order to change the positon to the top, change the class to tooltip--top
Tooltip will appear on hover.

Tooltip content goes here

                <div class="tooltip-parent">
  Tooltip will appear on hover.
  <p class="tooltip">Tooltip content goes here</p>
</div>

              

Text with animated arrow

The component can be used whithin a link, a header or a paragraph.
The arrow size is relevant to the parent's font size.
Text with animated arrow
                <span class="text-with-arrow">
  Text with animated arrow
  <i class="text-with-arrow__icon"><svg class="icon-arrow-right" viewBox="0 0 18 14" height="0.9em" width="0.77em" xmlns="http://www.w3.org/2000/svg"><path d="m16 6-6.39717314 6-.59505301-.5581087 5.03392225-4.72138754.3477032-.32611578h-.4911661-13.8982332v-.7894388h13.8975265.4911661l-.3477032-.32611577-5.03392226-4.72138754.59575972-.55744587z" stroke="currentColor" stroke-width="1.35" transform="translate(1 1)"></path></svg></i>
</span>

              
Header with animated arrow
                <h6>
  <span class="text-with-arrow">
    Header with animated arrow
    <i class="text-with-arrow__icon"><svg class="icon-arrow-right" viewBox="0 0 18 14" height="0.9em" width="0.77em" xmlns="http://www.w3.org/2000/svg"><path d="m16 6-6.39717314 6-.59505301-.5581087 5.03392225-4.72138754.3477032-.32611578h-.4911661-13.8982332v-.7894388h13.8975265.4911661l-.3477032-.32611577-5.03392226-4.72138754.59575972-.55744587z" stroke="currentColor" stroke-width="1.35" transform="translate(1 1)"></path></svg></i>
  </span>
</h6>

              
                <a href="#" class="btn-link">
  <span class="text-with-arrow">
    Link with animated arrow
    <i class="text-with-arrow__icon"><svg class="icon-arrow-right" viewBox="0 0 18 14" height="0.9em" width="0.77em" xmlns="http://www.w3.org/2000/svg"><path d="m16 6-6.39717314 6-.59505301-.5581087 5.03392225-4.72138754.3477032-.32611578h-.4911661-13.8982332v-.7894388h13.8975265.4911661l-.3477032-.32611577-5.03392226-4.72138754.59575972-.55744587z" stroke="currentColor" stroke-width="1.35" transform="translate(1 1)"></path></svg></i>
  </span>
</a>

              
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
                <nav aria-label="breadcrumb">
  <ul class="breadcrumb">
      <li class="breadcrumb-item active aria-current="page">
        <a href="#">Home</a>
      </li>
      <li class="breadcrumb-item active aria-current="page">
        <a href="#">Industries</a>
      </li>
      <li class="breadcrumb-item active aria-current="page">
        <a href="#">Retail</a>
      </li>
  </ul>
</nav>

              
                <div class="social-share">
  <p class="preheader-small">Share</p>
  <div class="social-share__links">
      <a href="#" title="Share on Facebook" target="_blank" rel="noreferrer noopener" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://www.yext.com/blog/2021/07/a-competitive-edge-with-ecommerce-search/','popup','width=600,height=600')" class="social-logo">
          <svg class="facebook-icon">...</svg></a>
      <a href="#" title="Share on Twitter" target="_blank" rel="noreferrer noopener" onclick="window.open('http://www.twitter.com/share?url=https://www.yext.com/blog/2021/07/a-competitive-edge-with-ecommerce-search/','popup','width=600,height=600')" class="social-logo">
          <svg class="twitter-icon">...</svg></a>
      <a href="#" title="Share on Linkedin" target="_blank" rel="noreferrer noopener" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&amp;url=https://www.yext.com/blog/2021/07/a-competitive-edge-with-ecommerce-search/','popup','width=600,height=600')" class="social-logo">
          <svg class="linkedin-icon"...</svg></a>
      <a href="#" title="Share on Email" target="_blank" rel="noreferrer noopener" onclick="window.open('mailto:?body=https://www.yext.com/blog/2021/07/a-competitive-edge-with-ecommerce-search/','popup','width=600,height=600')" class="social-logo">
          <svg class="email-icon">...</svg>
      </a>
  </div>
</div>

              

Headline

Headline, spreading across 10 columns on desktop and 12 columns on mobile.
In order to add text glow, you need to add the class text-glow (see second example below)

Title goes here

Description text - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eos porro ea. Est explicabo autem ad sit? Nulla nesciunt, qui nemo temporibus voluptate inventore

                <div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-md-10">
      <div class="headline">
        <h4>Title goes here</h4>
        <p>Description text - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eos porro ea. Est explicabo autem ad sit? Nulla nesciunt, qui nemo temporibus voluptate inventore</p>
      </div>
    </div>
  </div>
</div>

              

Headline with text glow

Description text - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eos porro ea. Est explicabo autem ad sit? Nulla nesciunt, qui nemo temporibus voluptate inventore

                <div class="container theme-black">
  <div class="row justify-content-center">
    <div class="col-12 col-md-10">
      <div class="headline">
        <h4 class="text-glow">Headline with text glow</h4>
        <p>Description text - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eos porro ea. Est explicabo autem ad sit? Nulla nesciunt, qui nemo temporibus voluptate inventore</p>
      </div>
    </div>
  </div>
</div>

              

Review

JG

3 months ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras volutpat, velit sed consectetur ullamcorper, eros erat finibus tellus, sagittis pretium diam mauris non ipsum nam sodales malesuada.

                <div class="review">
  <div class="d-flex align-items-center mb-1">
    <img  src="{{data.author_avatar}}" class="quote__author-avatar rounded-circle mr-2">
    <div>
      <p class="p2"><strong>{{data.author}}</strong></p>
      <div class="d-flex align-items-baseline">
        {% include components/RatingStars.html data = data %}
        <p class="p4">3 months ago</p>
      </div>
    </div>
  </div>
  <p>{{data.text}}</p>
</div>

              

Customer Story Quote

The default color of the separator line is "Concrete-400" (#8996a0)

'In order to change the color of the separator line, you need to add a theme color to it:' e.g. theme-retail-highlight

"Yext Answers has been a game-changer in getting real-time insight and producing content that answers those questions and directs customers to the right place. The control and visibility allows us to turn those situations into action and it's been brilliant."

Graham Johnson

Head of Omnichannel, Three

                <div class="customer-quote d-flex align-items-start my-6 my-md-8">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSFWBnyvJtrWYVL5q2Nwl1UkCOxOPxFGoORjg&amp;usqp=CAU" class="customer-quote__avatar rounded-circle" alt="">
  <div class="customer-quote__separator theme-retail-highlight"></div>
  <div class="customer-quote__text">
    <h6>"Yext Answers has been a game-changer in getting real-time insight and producing content that answers those questions and directs customers to the right place. The control and visibility allows us to turn those situations into action and it's been brilliant."</h6>
    <div class="customer-quote__author mt-2">
      <p><strong>Graham Johnson</strong></p>
      <p>Head of Omnichannel, Three</p>
    </div>
  </div>
</div>

              

Quote

"143 Character Limit. Optimized Knowledge Answers Accurate Answers Knowledge Synonyms Consumer Unbranded Optimized Attributes No Indexing Answers Online"

20 Character Limit

20 Character Limit

                <div class="quote">
    <div class="quote__content">
      <p class="quote__text mb-3">"143 Character Limit. Optimized Knowledge Answers Accurate Answers Knowledge Synonyms Consumer Unbranded Optimized Attributes No Indexing Answers Online"</p>
      <div class="quote__author-info d-flex align-items-start">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSFWBnyvJtrWYVL5q2Nwl1UkCOxOPxFGoORjg&amp;usqp=CAU" class="quote__author-avatar rounded-circle mr-2">
        <div>
          <p class="quote__author font-weight-bold">20 Character Limit</p>
          <p class="quote__author-title mb-2">20 Character Limit</p>
          <img class="quote__company-logo" src="https://dummyimage.com/140x50/4AC6B6/000" alt="Ohio Health logo">
        </div>
      </div>
    </div>
  </div>

              

Icon with text

                <a href="#" class="icon-with-text">
  <div class="icon-with-text__icon">
    <svg>...</svg>
  </div>
  <div>  
    <p class="icon-with-text__title">Answers</p>
    <p class="icon-with-text__description">A powerful search engine on your website to drive business.</p>
  </div>
</a>

              

Media Content

Headshot With Bio

Firstname Lastname

Title, Company

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Headshot With Bio - Large

Firstname Lastname

Title, Company

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Overflowing Image

Image or video, which is overflowing of the left side of the the main container
                <div class="overflowing-media">
  <div>
  <!-- Local video  -->
  <video width="100%" height="100%" muted autoplay loop>
    <source src="https://dm0qx8t0i9gc9.cloudfront.net/watermarks/video/-z2uGzh/videoblocks-ocean-title-design_so40okfwr__p__6704edc9f1d4f4604192c4cb7e03fa67__P360.mp4" type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
  </video>
  </div>
</div>

              

Watch now - 2 mins

                <div class="video-module position-relative">
<button class="play-button " data-bs-toggle="modal" data-bs-target="#VideoModuleModal" data-video="https://dm0qx8t0i9gc9.cloudfront.net/watermarks/video/-z2uGzh/videoblocks-ocean-title-design_so40okfwr__p__6704edc9f1d4f4604192c4cb7e03fa67__P360.mp4"></button>
  <p class="preheader">Watch now - 2 mins</p>
  <img class="w-100" src="https://via.placeholder.com/640x360/C5CACE/fff?text=16:9" alt="">
</div>
<!-- Lightbox -->
<!-- ATTENTION: the ID must be unique (including the data-bs-target)  -->
<div class="lightbox modal fade" id="VideoModuleModal" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="VideoModuleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" data-bs-target="#VideoModuleModal">
          <svg class="close-svg">...</svg>
        </button>
      </div>
      <div class="modal-body">
        <div class="iframe-wrapper">
          <video width="100%" height="100%" controls="">
            <source src="" type="video/mp4">
              Sorry, your browser doesn't support embedded videos.
          </video>     
        </div>
      </div>
    </div>
  </div>
</div>

              

Headshot - small

John Johnson

Manager, Company Name

                <div class="col-6">
  <div class="headshot headshot--small row align-items-start">
    <div class="col-12 col-lg-6">
      <img class="headshot__avatar mb-1 mb-lg-0" src="https://via.placeholder.com/350x350/8996A0/fff?text=1:1" alt="">
    </div>
    <div class="headshot__title-wrapper col-12 col-lg-6 d-block d-sm-flex d-md-block">
      <div class="headshot__title order-2 mb-1">
        <p><strong>John Johnson</strong></p>
        <p>Manager, Company Name</p>
      </div>
      <img class="headshot__company-logo order-1" src="https://dummyimage.com/66x44/f1f1f1/fff" alt="">
    </div>
  </div> 
</div>

              

Headshot - large

John Johnson

Manager, Company Name

                <div class="col-6">
  <div class="headshot headshot--large">
    <img class="headshot__avatar" src="https://via.placeholder.com/350x350/8996A0/fff?text=1:1" alt="">
    <div class="headshot__title-wrapper">
      <img class="headshot__company-logo" src="https://dummyimage.com/66x44/f1f1f1/fff" alt="">
      <div class="headshot__title">
        <p><strong>John Johnson</strong></p>
        <p>Manager, Company Name</p>
      </div>
    </div>
  </div>
</div>

              

Cards

The default hover shadow can be removed by adding a class no-shadow to the card.

The default card border can be removed by adding a class no-border

Note: The card--product and card--icon don't have a border by default

Card Icon

                <a href="#" class="card card--icon">
  <div class="card-body">
    <div class="card-icon">
      <!-- no need for viewBox here (it breaks the icons in IE) -->
      <svg class="icon icon-AwardCup">...</svg>
    </div>
    <p class="card-subtitle p1"><strong>26 Character Limit</strong></p>
    <i class="card-arrow"><svg class="icon-arrow-right" width="11px" height="14" viewBox="0 0 18 14" xmlns="http://www.w3.org/2000/svg"><path d="m16 6-6.39717314 6-.59505301-.5581087 5.03392225-4.72138754.3477032-.32611578h-.4911661-13.8982332v-.7894388h13.8975265.4911661l-.3477032-.32611577-5.03392226-4.72138754.59575972-.55744587z" stroke="currentColor" stroke-width="1.35" transform="translate(1 1)"></path></svg></i>
  </div>
</a>

              

Card Text with Icon

Promote Engagement

Create experiences on your owned search properties and on search engines that make consumers want to click.

If the card has a modal, you need to pass data-bs-toggle="modal" data-bs-target="#{{modalId}}" to the .card element and add the modal layout
                <div class="card card--logo" data-bs-toggle="modal" data-bs-target="#card_modal_123">
  <div class="card-body">
    <h6 class="card-title">Card w/ modal</h6>
    <img class="card-logo" src="/_pages/images/tier3/fins.png">
  </div>
</div>

<!-- Modal -->
<div class="modal modal--form fade" id="card_modal_123" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="card_modal_123Label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" data-bs-target="#card_modal_123">
          <svg class="close-svg">...</svg>
        </button>
      </div>
      <div class="modal-body theme-white">
        <div class="two-column-with-image">
          <div class="container">
            <div class="row justify-content-between align-items-center">
              <!-- Image -->
              <div class="col-12 col-lg-6">
                  <img class="w-100" src="https://picsum.photos/id/1015/530/400" alt="">
              </div>
              <!-- Text Content -->
              <div class="col-12 col-lg-6">
                <h2 class="mb-2 mt-3 mt-lg-0">Modal title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel risus nec est sollicitudin interdum. Curabitur ac nisl rutrum, convallis enim eu, consectetur dolor. Fusce in enim at purus consectetur placerat. Suspendisse sollicitudin cursus cursus. Utvolutpat ex sit amet justo efficitur accumsan.</p>
                <a href="#" class="btn btn-sm btn-primary mt-3">Button opt</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

              

Card Product

                <a href="#" class="card card--product">
  <div class="card-body">
    <div class="card-icon">
      <!-- no need for viewBox here (it breaks the icons in IE) -->
      <svg class="icon icon-answers-p">...</svg>
    </div>
    <p class="card-subtitle p1"><strong>Answers</strong></p>
    <p class="card-text mb-2 p3">45 Character Limit</p>
  </div>
</a>

              

Article Tile

Card Image Top
Guide to Intent Marketing

Learn more about how answering customer questions can drive conversion, lower operational costs, and unlock new customer

Get the guide
                <div class="card article-tile">
  <a href="https://www.yext.com/">
    <img class="card-img-top" src="https://via.placeholder.com/640x360/8996A0/fff?text=16:9" alt="Card Image Top">
  </a>
  <div class="card-body">
    <h6 class="card-title">Guide to Intent Marketing</h6>
    <p class="card-text mb-2 p3">Learn more about how answering customer questions can drive conversion, lower operational costs, and unlock new customer</p>
    <a href="" class="btn btn-sm btn-outline-primary">Get the guide
      <svg class="card-link-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M79.093 0L48.907 30.187 146.72 128l-97.813 97.813L79.093 256l128-128z"></path></svg>
    </a>
  </div>
</div>

              

Article Tile Short

Card Image Top
Webinar
Title Goes Here and Here and Here
                <div class="card article-tile--short">
  <a href="https://www.yext.com/">
    <img class="card-img-top" src="https://via.placeholder.com/640x360/8996A0/fff?text=16:9" alt="Card Image Top">
  </a>
  <div class="card-body">
    <a href="https://www.yext.com" class="card-preheader preheader-small">Webinar</a>
    <img class="card-logo" src="https://dummyimage.com/127x50/8996A0/fff" style="width: 130px">
    <p class="card-text mb-2 p3">Title Goes Here and Here and Here</p>
  </div>
</div>

              
Card Image Top
Webinar

Title Goes Here and Here and Here

                <div class="card article-tile--short">
  <a href="https://www.yext.com/">
    <img class="card-img-top" src="https://via.placeholder.com/640x360/8996A0/fff?text=16:9" alt="Card Image Top">
  </a>
  <div class="card-body">
    <a href="https://www.yext.com" class="card-preheader preheader-small">Webinar</a>
    <h6 class="card-title">Title Goes Here and Here and Here</h6>
  </div>
</div>

              

Card Tile Simple

                <a href="#" class="card simple-card">
  <div class="card-body">
    <p class="card-preheader preheader-small">Preheader</p>
    <h6 class="card-title">Card Title</h6>
    <p class="p4 card-text mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Sed do eiusmod tempor incididunt ut labore et dolore magna</p>
    <span class="btn btn-sm btn-outline-primary">Button Text</span>
  </div>
</a>

              

Card Tile Simple with arrow

                <a href="#" class="card simple-card--arrow">
  <div class="card-body">
    <div class="card-icon">
      <svg class="icon icon-WebsiteLaptop" aria-hidden="true"> 
        <use xlink:href="/dist/svg/icons.svg#icon-WebsiteLaptop"></use>
      </svg>
    </div>
    <p class="p2 card-title">
      <span class="text-with-arrow">
        Explore the platform
        <i class="text-with-arrow__icon"><svg class="icon-arrow-right" viewBox="0 0 18 14" height="0.9em" width="0.77em" xmlns="http://www.w3.org/2000/svg"><path d="m16 6-6.39717314 6-.59505301-.5581087 5.03392225-4.72138754.3477032-.32611578h-.4911661-13.8982332v-.7894388h13.8975265.4911661l-.3477032-.32611577-5.03392226-4.72138754.59575972-.55744587z" stroke="currentColor" stroke-width="1.35" transform="translate(1 1)"></path></svg></i>
      </span>
    </p>
    <p class="p4 card-text mb-2">Empower your customers and agents to self-serve and get direct, actionable answers to support questions</p>
  </div>
</a>

              

Card Tile Simple with icon

Title goes here and here and here

Brief description about episode goes here. Learn more about how answering customer questions can drive conversion.

                <a href="#" class="card simple-card">
  <div class="card-body">
    <p class="card-preheader preheader-small">Preheader</p>
    <h6 class="card-title">Card Title</h6>
    <p class="p4 card-text mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Sed do eiusmod tempor incididunt ut labore et dolore magna</p>
    <span class="btn btn-sm btn-outline-primary">Button Text</span>
  </div>
</a>