<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>