NS Design System
v3.0.0 · 257 tokens

129Sponsor card

The paid surface, in four shapes. Logo, name, one-line tagline, a sentence and an outline CTA — and a mono Sponsored label that is never optional. It is drawn in the system's own hairline vocabulary rather than a louder one, because a sponsor styled to shout is a sponsor that trains the reader to scroll past that style.

Use it for

  • --skyscraper in a content rail: the one shape with room for the whole pitch stacked
  • --square in a narrow rail or a grid; the description is dropped, not clamped
  • --leaderboard under an article or above a footer, where a wide strip fits
  • --article INSIDE the reading flow, where a card would read as an endorsement

Not for

  • A button for the CTA — it would compete with the one real action on the page. It is a text link with an arrow, the same shape “read more” takes everywhere else
  • More than one per surface. Two sponsors in a rail is a rail nobody looks at
  • Above the fold of a paid lesson: a learner who bought the course is not the audience for a second sale
  • Dropping the label because the design “looks better without it”. It is not decoration

Skyscraper

The rail shape, and the only one with room for the label, the mark, the tagline, the description and the action all stacked. Reach for it when the sponsor actually has something to say.

Sponsor Orgforce Deploy without the change set CI for Salesforce orgs: a scratch org per pull request, a deploy per merge, and nobody clicking through Setup at midnight. Try it free
markup
<a class="ns-sponsor ns-sponsor--skyscraper" href="#0" style="max-inline-size:15rem">
  <span class="ns-sponsor__label">Sponsor</span>
  <img class="ns-sponsor__logo" src="../assets/logo/favicon.svg" alt="Orgforce">
  <span class="ns-sponsor__body">
    <span class="ns-sponsor__name">Orgforce</span>
    <span class="ns-sponsor__tagline">Deploy without the change set</span>
    <span class="ns-sponsor__text">CI for Salesforce orgs: a scratch org per pull request, a deploy per merge, and nobody clicking through Setup at midnight.</span>
  </span>
  <span class="ns-sponsor__cta">Try it free <i class="ph ph-arrow-right" aria-hidden="true"></i></span>
</a>

Square

The compact rail or grid unit. The description is DROPPED rather than clamped: two words of a sentence followed by an ellipsis is worse than no sentence, and the tagline already exists to be the short version.

Sponsor Orgforce Deploy without the change set Hidden at this size — the headline is the short version. Try it free
markup
<a class="ns-sponsor ns-sponsor--square" href="#0" style="max-inline-size:15rem">
  <span class="ns-sponsor__label">Sponsor</span>
  <img class="ns-sponsor__logo" src="../assets/logo/favicon.svg" alt="Orgforce">
  <span class="ns-sponsor__body">
    <span class="ns-sponsor__name">Orgforce</span>
    <span class="ns-sponsor__tagline">Deploy without the change set</span>
    <span class="ns-sponsor__text">Hidden at this size — the headline is the short version.</span>
  </span>
  <span class="ns-sponsor__cta">Try it free <i class="ph ph-arrow-right" aria-hidden="true"></i></span>
</a>

Leaderboard

One line: mark, text, action. For the full width of a content column — under an article, above a footer, between two bands. Stacks below 48rem, because three cells in a phone's width is a logo, four words and a truncated button.

Sponsored Orgforce Deploy without the change set A scratch org per pull request. A deploy per merge. Try it free
markup
<a class="ns-sponsor ns-sponsor--leaderboard" href="#0" style="inline-size:100%">
  <span class="ns-sponsor__label">Sponsored</span>
  <img class="ns-sponsor__logo" src="../assets/logo/favicon.svg" alt="Orgforce">
  <span class="ns-sponsor__body">
    <span class="ns-sponsor__name">Orgforce</span>
    <span class="ns-sponsor__tagline">Deploy without the change set</span>
    <span class="ns-sponsor__text">A scratch org per pull request. A deploy per merge.</span>
  </span>
  <span class="ns-sponsor__cta">Try it free <i class="ph ph-arrow-right" aria-hidden="true"></i></span>
</a>

In the article

Deliberately NOT a card. A boxed object in a column of prose reads as a pull-quote — something the writer endorsed — and this is not that. Hairline rules top and bottom, no fill, no radius: the visual grammar of an interruption rather than of an inclusion. It is also the only shape set at the prose measure, so it sits inside the text block instead of spanning past it and announcing itself as chrome.

An aggregate query still returns rows, and those rows still count: 50,000 of them, same as any other query.

Sponsored Orgforce Deploy without the change set Every pull request gets a scratch org — including the aggregate queries you just wrote. Try it free

A GROUP BY on a field with high cardinality will hit that ceiling on a real org.

markup
<div class="ns-prose" style="inline-size:100%">
  <p>An aggregate query still returns rows, and those rows still count: 50,000 of them, same as any other query.</p>
</div>
<a class="ns-sponsor ns-sponsor--article" href="#0" style="inline-size:100%">
  <span class="ns-sponsor__label">Sponsored</span>
  <img class="ns-sponsor__logo" src="../assets/logo/favicon.svg" alt="Orgforce">
  <span class="ns-sponsor__body">
    <span class="ns-sponsor__name">Orgforce</span>
    <span class="ns-sponsor__tagline">Deploy without the change set</span>
    <span class="ns-sponsor__text">Every pull request gets a scratch org — including the aggregate queries you just wrote.</span>
  </span>
  <span class="ns-sponsor__cta">Try it free <i class="ph ph-arrow-right" aria-hidden="true"></i></span>
</a>
<div class="ns-prose" style="inline-size:100%">
  <p>A <code>GROUP BY</code> on a field with high cardinality will hit that ceiling on a real org.</p>
</div>

The empty slot

Before a sponsor is sold. Dashed and plainly unfinished on purpose: it is the one surface in the system allowed to look like a placeholder, because that is exactly what it is. Never ship it to a reader — it is for the layout stage and for the sales page.

Advertise with us
markup
<div class="ns-adslot" style="inline-size:100%;max-inline-size:26rem">
  <span class="ns-adslot__label"><i class="ph ph-megaphone" aria-hidden="true"></i>Advertise with us</span>
</div>

In place

Both player surfaces carry one: --skyscraper or --square under the page rail's list, and --article once inside the lesson, below the fold.

Article lesson Video lesson

markup
<p><a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-player-article.html" target="_blank" rel="noopener">Article lesson <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a>
<a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-player.html" target="_blank" rel="noopener">Video lesson <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a></p>

Accessibility contract

  • The Sponsored label is real text in the DOM, not a background image or a ::before — it must be readable, translatable and announced
  • The whole card is the <a>; the CTA inside it is a <span>, because a link inside a link is invalid and unnavigable
  • The logo takes the sponsor's name as its alt, so the card announces WHO it is for before what it says