code-examples.html

<div class="my-6 pt-6">
 <h2 class="mb-2 font-mktg h1" id="code-examples"><a href="#code-examples">{% data ui.product_landing.code_examples %}</a></h2>
 
 <div class="pr-lg-3 mb-5 mt-3">
 <input class="js-filter-card-filter input-lg py-2 px-3 col-12 col-lg-8 form-control" placeholder="{% data ui.product_landing.search_code_examples %}" type="search" autocomplete="off" aria-label="Search code examples"/>
 </div>
 
 <div class="d-flex flex-wrap gutter">
 {% render code-example-card for productCodeExamples as example %}
 </div>
 
 {% if productCodeExamples.length > 6 %}
 <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">{% data ui.product_landing.show_more %} {% octicon "arrow-right" %}</button>
 {% endif %}
 
 <div class="js-filter-card-no-results d-none py-4 text-center color-text-secondary font-mktg">
 <div class="mb-3">{% octicon "search" width="24" %}</div>
 <h3 class="text-normal">{% data ui.product_landing.sorry %} <strong class="js-filter-card-value"></strong></h3>
 <p class="my-3 f4">{% data ui.product_landing.no_result %}<br>{% data ui.product_landing.try_another %}</p>
 <a href="https://github.com/github/docs/blob/main/data/variables/actions_code_examples.yml">{% data ui.product_landing.learn %} {% octicon "arrow-right" %}</a>
 </div>
</div>