How can I target the first item in a view?

Question

I have a views page that shows all the latest articles that were posted. I want to show case the latest article in a different div on it's own, and then have my loop with all the other articles.

This is my code for the loop, which is in the node--view.html.twig file -

    <div{{ attributes.addClass('col-4')}}>
      <div class="news-card">
        <img src="{{ file_url(node.field_image.entity.fileuri) }}">
        <h3>{{ node.label }}</h3>
        {% set text = content.body|render|striptags %}
        <p>{{ text|length > 100 ? text|slice(0, 120) ~ '...' : text }}</p>
        <a href="{{ url }}" class="btn black-btn">Read More</a>
      </div>
    </div>

and in my views-view-unformatted.html.twig file I have -

<h2>{{ view.getTitle() }}</h2>
  {% if title %}
      <h3>{{ title }}</h3>
  {% endif %}
<div class="row news-row">
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class,
    ]
  %}
    {{- row.content -}}
  {% endfor %}
</div>

Answer 1

You could also do

views-view-unformatted.html.twig

_{Note: add the view name if you want to target a specific view, views-view-unformatted--view-name.html.twig}

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% set count = 1 %}
{% for row in rows %}
  {%
    set row_classes = [
    default_row_class ? 'views-row',
  ]
  %}
  {% if count == 1 %}
    {%  set row_classes = row_classes|merge(['first-row']) %}
  {%  endif %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{- row.content -}}
  </div>
  {% set count = count + 1 %}
{% endfor %}

and then in css

.first-row { ... }

---

OR alternatively follow How can I get numbered classes on rows?

and

.views-row-1 { ... }

Answer 2

One possible solution ist to create two views. One for your featured content (only 1 item or as much you want to feature) and the second one for the rest with an offset. You can set the offset under pager options (items to skip).