Primary Card

Our cards are designed to cater for a number of content types. They are most often used for editorial content, but variations can include buttons, tags, subheadings and the card can appear without an image if necessary.

Example

Desktop/H4/DarkBlue: Card title here and it goes across one, two or three lines when needed

Here we present approaches to identify fishing activity from S-AIS data for three dominant fishing gear types.

Apply now
<div class="inm-cards-wrapper">
  <div class="inm-cards-wrapper__card inm-card ">
    <div class="inm-card__image">
      <img src="/assets/7b346255a97804d904460a95845ea0c5.png" alt="Example" />
    </div>
    <div class="inm-card__content">
      <h4 class="inm-card__title">Desktop/H4/DarkBlue: Card title here and it goes across one, two or three lines when needed</h4>
      <p>Here we present approaches to identify fishing activity from S-AIS data for three dominant fishing gear types.</p>
      <a href="#" class="inm-link inm-link--chevron">Apply now</a>
    </div>
  </div>
</div>
Variations
Example
Latest white paper

Improving Fishing Detection from Satellite Using Machine Learning

Here we present approaches to identify fishing activity from S-AIS data for three dominant fishing gear types.

Apply now
Example
Optional subheading

When the title of a card goes across three lines, that means…

…the descriptive copy goes across two lines instead of three hendrerit erat eu, auctor leo. Donec vitae rutrum.

Example

The title of the card goes here and it goes across two lines when needed

Descriptive copy can go over three lines, hendrerit erat eu, auctor leo. Donec vitae rutrum elit, id euismod urna. Aenean ut suscipit augue. Maecenas imperdiet purus.

Apply now
<div class="inm-cards-wrapper">
  <div class="inm-cards-wrapper__card inm-card inm-card--wide">
    <div class="inm-card__image">
      <img src="/assets/7b346255a97804d904460a95845ea0c5.png" alt="Example" />
    </div>
    <div class="inm-card__content">
      <div class="inm-card__subheading">Latest white paper</div>
      <h4 class="inm-card__title">Improving Fishing Detection from Satellite Using Machine Learning</h4>
      <p>Here we present approaches to identify fishing activity from S-AIS data for three dominant fishing gear types.</p>
      <a href="#" class="inm-link inm-link--chevron">Apply now</a>
    </div>
  </div>
  <div class="inm-cards-wrapper__card inm-card ">
    <div class="inm-card__image">
      <img src="/assets/7b346255a97804d904460a95845ea0c5.png" alt="Example" />
    </div>
    <div class="inm-card__content">
      <div class="inm-card__subheading">Optional subheading</div>
      <h4 class="inm-card__title">When the title of a card goes across three lines, that means…</h4>
      <p>…the descriptive copy goes across two lines instead of three hendrerit erat eu, auctor leo. Donec vitae rutrum.</p>
      <button type="button" class="inm-button inm-card__button inm-button--small inm-button--secondary inm-button--secondary--mid-blue inm-button--icon-right">Optional button
        <img class="inm-button__icon" src="/assets/8777cad26335a111702188808178db14.svg" alt="" />
      </button>
    </div>
  </div>
  <div class="inm-cards-wrapper__card inm-card ">
    <div class="inm-card__image">
      <img src="/assets/7b346255a97804d904460a95845ea0c5.png" alt="Example" />
    </div>
    <div class="inm-card__content">
      <h4 class="inm-card__title">The title of the card goes here and it goes across two lines when needed</h4>
      <p>Descriptive copy can go over three lines, hendrerit erat eu, auctor leo. Donec vitae rutrum elit, id euismod urna. Aenean ut suscipit augue. Maecenas imperdiet purus.</p>
      <a href="#" class="inm-link inm-link--chevron">Apply now</a>
    </div>
  </div>
</div>
Style and spacing
Card corners
Rollover style
Desktop
Mobile
Layout

When cards appear in a grid, we vary the layout by including a side-by-side card layout. On small breakpoints we simply stack all cards on top of each other, and allow the user to scroll.

Desktop
Mobile