Using the FILE NAME SUGGESTIONS, we can navigate to the core/modules/system/templates folder and copy the item-list.html.twig template to our themes/octo/templates folder. Next, we will need to rename the template to item-list--search-results.html.twig and then add the following markup:

New markup

{% set classes = ['list-unstyled'] %}

{% if context.list_style %}
  {%- set attributes = attributes.addClass('item-list__' ~
  context.list_style) %}
{% endif %}

{% if items or empty %}
  
  {%- if title is not empty -%}
    <h3>{{ title }}</h3>
  {%- endif -%}

  {%- if items -%}
    <{{ list_type }}{{ attributes.addClass(classes) }}>
      {%- for item in items -%}
        <li{{ item.attributes }}>{{ item.value }}</li>
      {%- endfor -%}
    </{{ list_type }}>
  {%- else -%}
    {{- empty -}}
  {%- endif -%}

{%- endif %}

Make sure to save the template, clear Drupal's cache, and then refresh the Search results page in the browser.

Our ordered list should now be displaying exactly like the Mockup. All we had to do to accomplish this was add a new CSS class to our template using Twig. We then added the new class to our markup using the Twig function attributes.addClass().

Now that our list is styled accordingly, we can focus on each individual search result. By default, each result returns the title, snippet, and additional information such as the number of comments if the result contains a Post. As each result is consistently styled, we will be removing the {{ info }} variable from the Twig template.

Using the FILE NAME SUGGESTIONS, we can navigate to the core/modules/search/templates folder and copy the search-result.html.twig template to our themes/octo/templates folder. Next, we will need to replace the markup by adding the following:

New markup

{{ title_prefix }}
<h3{{ title_attributes }}>
  <a href="{{ url }}">{{ title }}</a>
</h3>
{{ title_suffix }}
{% if snippet %}
  <p{{ content_attributes }}>{{ snippet }}</p>
{% endif %}

Make sure to save the template, clear Drupal's cache, and then refresh the Search results page in the browser. Each result is now consistent in the information it displays.