styleguide version 0.0.0

Listing Cards (Archive): Press Releases 

<section class="supt-listing-cards -press" data-page="1">
    <div class="container">
        <div class="row">
            <div class="supt-listing-cards__items col">
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Launches its 2024 Annual Report</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-02-26T00:00:00+00:00">February 26, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure achieve top ranking in Sustainalytics 2025 ESG Companies List</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security services in Europe and Latin America, has been included by Sustainalytics on its 2025 Top-rated ESG companies.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Recognised with Top Employer Europe Certification for the second time</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Launches its 2024 Annual Report</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-02-26T00:00:00+00:00">February 26, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure achieve top ranking in Sustainalytics 2025 ESG Companies List</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security services in Europe and Latin America, has been included by Sustainalytics on its 2025 Top-rated ESG companies.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Recognised with Top Employer Europe Certification for the second time</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Launches its 2024 Annual Report</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-02-26T00:00:00+00:00">February 26, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure achieve top ranking in Sustainalytics 2025 ESG Companies List</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security services in Europe and Latin America, has been included by Sustainalytics on its 2025 Top-rated ESG companies.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Recognised with Top Employer Europe Certification for the second time</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Launches its 2024 Annual Report</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
                    <div class="supt-card-press-release__head">
                        <div class="supt-post-metas">
                            <div class="supt-tag">
                                <span class="supt-tag__label">Press release</span>
                            </div>
                            <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
                            </svg> <time itemprop="datePublished" datetime="2025-05-05T00:00:00+00:00">May 05, 2025</time>
                        </div>
                    </div>
                    <div class="supt-card-press-release__body">
                        <h3 itemprop="name">Verisure Recognised with Top Employer Europe Certification for the second time</h3>
                        <p itemprop="abstract">Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.</p>
                    </div>
                    <div class="supt-card-press-release__foot">
                        <a href="#press-release" class="supt-button-link " itemprop="url">
                            <span>
                                Read more
                                <svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="supt-listing-cards__foot col">

                <span class="supt-button  ">
                    <button class="supt-button__link">
                        <span class="supt-button__title">

                            See all press releases

                        </span>
                    </button>

                    <span class="supt-button__wrapper">
                        <span class="supt-button__inner">
                            <span class="supt-button__title -clone" aria-hidden="true">
                                See all press releases
                            </span>
                            <span class="supt-button__mask">
                                <span class="supt-button__mask__inner"></span>
                            </span>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    </div>
</section>

No notes defined.

<section class="supt-listing-cards {{ modifiers|modifiersAttr }}" data-page="1">
	<div class="container">
		<div class="row">
			<div class="supt-listing-cards__items col">
				{% for card in cards %}
					{% include template with card only %}
				{% endfor %}
			</div>
		</div>
		<div class="row">
			<div class="supt-listing-cards__foot col">
				{% include "atoms/buttons/button/button.twig" with button only %}
			</div>
		</div>
	</div>
</section>
 
{
  "modifiers": [
    "press"
  ],
  "template": "molecules/cards/card-press-release/card-press-release.twig",
  "button": {
    "title": "See all press releases"
  },
  "cards": [
    {
      "date": "2025-05-05",
      "title": "Verisure Launches its 2024 Annual Report",
      "description": "Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-02-26",
      "title": "Verisure achieve top ranking in Sustainalytics 2025 ESG Companies List",
      "description": "Verisure, the leading provider of professionally monitored security services in Europe and Latin America, has been included by Sustainalytics on its 2025 Top-rated ESG companies.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-05-05",
      "title": "Verisure Recognised with Top Employer Europe Certification for the second time",
      "description": "Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-05-05",
      "title": "Verisure Launches its 2024 Annual Report",
      "description": "Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-02-26",
      "title": "Verisure achieve top ranking in Sustainalytics 2025 ESG Companies List",
      "description": "Verisure, the leading provider of professionally monitored security services in Europe and Latin America, has been included by Sustainalytics on its 2025 Top-rated ESG companies.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-05-05",
      "title": "Verisure Recognised with Top Employer Europe Certification for the second time",
      "description": "Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-05-05",
      "title": "Verisure Launches its 2024 Annual Report",
      "description": "Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-02-26",
      "title": "Verisure achieve top ranking in Sustainalytics 2025 ESG Companies List",
      "description": "Verisure, the leading provider of professionally monitored security services in Europe and Latin America, has been included by Sustainalytics on its 2025 Top-rated ESG companies.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-05-05",
      "title": "Verisure Recognised with Top Employer Europe Certification for the second time",
      "description": "Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-05-05",
      "title": "Verisure Launches its 2024 Annual Report",
      "description": "Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    },
    {
      "date": "2025-05-05",
      "title": "Verisure Recognised with Top Employer Europe Certification for the second time",
      "description": "Verisure, the leading provider of professionally monitored security services in Europe and Latin America, is proud to be awarded by the Top Employer® Institute, 2025 certification.",
      "link": {
        "href": "#press-release",
        "text": "Read more"
      }
    }
  ]
}
  • Content: 
    const PER_PAGE = 9;

export class ListingCards {
	$element: HTMLElement;
	$items: NodeListOf<Element>;
	$loadMore: HTMLElement | null = null;

	page: number;
	nbItems: number;

	constructor($element: HTMLElement) {
		this.$element = $element;

		this.$items = $element.querySelectorAll('.supt-listing-cards__items > *');

		this.page = parseInt(this.$element.dataset.page as string) || 1;
		this.nbItems = this.$items.length;

		const btn = this.$element.querySelector('.supt-listing-cards__foot button');
		if (!btn) return;

		this.$loadMore = btn as HTMLElement;

		this.toggleHasMore();

		this.bindEvents();
	}

	bindEvents() {
		if (!this.$loadMore) return;

		this.$loadMore.addEventListener('click', this.handleLoadMore.bind(this));
	}

	handleLoadMore() {
		this.page++;
		this.$element.dataset.page = this.page.toString();

		this.toggleHasMore();
	}

	toggleHasMore() {
		const hasMore = this.page * PER_PAGE < this.nbItems;
		this.$element.classList.toggle('-has-more', hasMore);
	}
}
  • URL: /components/raw/listing-cards/index.ts
  • Filesystem Path: src/components/organisms/listing-cards/index.ts
  • Size: 996 Bytes
  • Content: 
    .supt-listing-cards {
	@mixin clamp padding-block, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
	background-color: $color-grey-background;

	.container {
		display: flex;
		flex-direction: column;
		@mixin clamp gap, $spacing-8, $spacing-12, $breakpoint-xs, $breakpoint-xl;
	}

	&__items {
		display: grid;
		grid-template-columns: repeat(1, 1fr);

		@media (min-width: $breakpoint-md) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (min-width: $breakpoint-xl) {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	&__foot {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&[data-page='1'] .supt-listing-cards__items > *:nth-child(n + 10),
	&[data-page='2'] .supt-listing-cards__items > *:nth-child(n + 19),
	&[data-page='3'] .supt-listing-cards__items > *:nth-child(n + 28),
	&[data-page='4'] .supt-listing-cards__items > *:nth-child(n + 37),
	&[data-page='5'] .supt-listing-cards__items > *:nth-child(n + 46),
	&[data-page='6'] .supt-listing-cards__items > *:nth-child(n + 55),
	&[data-page='7'] .supt-listing-cards__items > *:nth-child(n + 64),
	&[data-page='8'] .supt-listing-cards__items > *:nth-child(n + 73),
	&[data-page='9'] .supt-listing-cards__items > *:nth-child(n + 82),
	&[data-page='10'] .supt-listing-cards__items > *:nth-child(n + 91),
	&[data-page='11'] .supt-listing-cards__items > *:nth-child(n + 100),
	&[data-page='12'] .supt-listing-cards__items > *:nth-child(n + 109),
	&[data-page='13'] .supt-listing-cards__items > *:nth-child(n + 118),
	&[data-page='14'] .supt-listing-cards__items > *:nth-child(n + 127),
	&[data-page='15'] .supt-listing-cards__items > *:nth-child(n + 136),
	&[data-page='16'] .supt-listing-cards__items > *:nth-child(n + 145),
	&[data-page='17'] .supt-listing-cards__items > *:nth-child(n + 154),
	&[data-page='18'] .supt-listing-cards__items > *:nth-child(n + 163),
	&[data-page='19'] .supt-listing-cards__items > *:nth-child(n + 172),
	&[data-page='20'] .supt-listing-cards__items > *:nth-child(n + 181) {
		display: none;
	}

	&:not(.-has-more) .supt-listing-cards__foot .supt-button {
		display: none;
	}

	&.-press {
		.supt-listing-cards__items {
			@mixin clamp gap, $spacing-2, $spacing-4, $breakpoint-xs, $breakpoint-xl;
		}
	}
	&.-news {
		.supt-listing-cards__items {
			@mixin clamp row-gap, $spacing-6, $spacing-12, $breakpoint-xs, $breakpoint-xl;
			column-gap: $spacing-4;
		}
	}
}
  • URL: /components/raw/listing-cards/listing-cards.css
  • Filesystem Path: src/components/organisms/listing-cards/listing-cards.css
  • Size: 2.4 KB