Skip to main content

Grids & Cards

TITLE_HERE

SUBTITLE_HERE

ALT_TEXT_HERE

YOUR_TEXT_CONTENT_HERE

 

Slider Grid

TITLE_HERE

SUBTITLE_HERE

ALT_TEXT_HERE

YOUR_TEXT_CONTENT_HERE text text text text text text text text text text text text text text text text text text text text text text text text text text text textext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t

 

TITLE_HERE

SUBTITLE_HERE

ALT_TEXT_HERE

YOUR_TEXT_CONTENT_HERE text text text text text text text text text text text text text text text text text text text text text text text text text text text textext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t

TITLE_HERE

SUBTITLE_HERE

ALT_TEXT_HERE

YOUR_TEXT_CONTENT_HERE text text text text text text text text text text text text text text text text text text text text text text text text text text text textext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t

<div class="slider-grid" data-slider-grid>
  <!-- SLIDE 1 -->
  <div class="slider-grid__slide">
    PASTE ANY CARD HERE
  </div>

  <!-- SLIDE 2 -->
  <div class="slider-grid__slide">
    PASTE ANY CARD HERE
  </div>

  <!-- SLIDE 3 -->
  <div class="slider-grid__slide">
    PASTE ANY CARD HERE
  </div>

<!-- End -->
</div>


POSSIBLE SIDE IMAGE CARD:
<div class="side-image-card side-image-card-bordered side-image-card-animate gradient-smaragd-aquamarin">
  <div class="side-image-card-header">
    <h2 class="side-image-card-title">TITLE_HERE</h2>
    <h4 class="side-image-card-subtitle">SUBTITLE_HERE</h4>
  </div>
  <div class="side-image-card-body">
    <div class="side-image-card-image">
      <img src="/images/Portfolio/Upmarkit-for-Davidoff-Coffee-Workshop.jpg" alt="ALT_TEXT_HERE">
    </div>
    <div class="side-image-card-text">
      <p>YOUR_TEXT_CONTENT_HERE</p>
    </div>
  </div>
  <!-- Extra bottom space inside the card (any CSS unit works). -->
  <div class="v-space" style="--v-space: 2em;"></div>
</div>
</div>

TARGETING ANOTHER PART OF THE PAGE
Variant — hand-off to another section on the page:

<div class="slider-grid" data-slider-grid data-next-target="#pricing">
  …same 3 slides as above…
</div>

<!-- somewhere lower on the page -->
<div id="pricing">…</div>

Basic Grid with Basic Cards

 

Workshop for Google

Workshop for Google

Tokyo, Japan

This was a workshop with retail executives from Asia exploring innovative strategies for digital transformation.

Workshop for BMW

Workshop for BMW

Munich, Germany

Executive leadership workshop focusing on future mobility concepts and sustainable luxury positioning.

Workshop for Nestlé

Workshop for Nestlé

Vevey, Switzerland

Innovation sprint with brand managers exploring new product development and consumer trend analysis.

Workshop for Lufthansa

Workshop for Lufthansa

Frankfurt, Germany

Customer experience design workshop reimagining premium travel services for the next generation.

 

Options to Hide any Grid:

<div class="basic-grid hide-on-mobile">
  …grid content…
</div>
.hide-on-mobile    /* hidden below 768 px */
.hide-on-tablet    /* hidden 768–1023 px */
.hide-on-desktop   /* hidden at 1024 px+ */
.show-only-mobile  /* shown ONLY below 768 px */
!-- ============================================================
     BASIC CARD & GRID COMPONENT - REFERENCE CODE
     ============================================================
     
     GRID OPTIONS (add to .basic-grid):
     - basic-grid-gap-sm      → smaller gap (0.75rem)
     - basic-grid-gap-lg      → larger gap (2rem)  
     - basic-grid-gap-xl      → extra large gap (2.5rem)
     - basic-grid-align-start → top-align cards (if heights vary)
     
     CARD STYLE OPTIONS (add to .basic-card):
     - basic-card-animate     → enables scroll reveal animation
     - basic-card-bordered    → border instead of shadow
     - basic-card-accent      → teal accent line on top
     - basic-card-accent basic-card-accent-coral  → coral accent
     - basic-card-accent basic-card-accent-purple → purple accent
     - basic-card-glass       → glassmorphism style
     - basic-card-dark        → dark background variant
     
     SMART GRID BEHAVIOR:
     - 1 card: 100% width
     - 2 cards: 50% each
     - 3 cards: 33% each
     - 4 cards: 2×2 layout (50% each)
     - 5 cards: 3+2 layout (stretched rows)
     
     RESPONSIVE:
     - Mobile (<640px): 1 column
     - Tablet (640-1023px): 2 columns
     - Laptop (1024-1399px): 3 columns
     - Desktop (1400px+): 4 columns
     ============================================================ -->

<div class="basic-grid">

  <!-- Card 1 -->
  <div class="basic-card basic-card-animate">
    <div class="basic-card-image">
      <img src="https://upmarkit.com/images/Portfolio/Upmarkit-for-Davidoff-Coffee-Workshop.jpg" alt="Workshop for Google">
    </div>
    <div class="basic-card-content">
      <h2 class="basic-card-title">Workshop for Google</h2>
      <h4 class="basic-card-subtitle">Tokyo, Japan</h4>
      <p class="basic-card-description">This was a workshop with retail executives from Asia exploring innovative strategies for digital transformation.</p>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="basic-card basic-card-animate">
    <div class="basic-card-image">
      <img src="https://upmarkit.com/images/Portfolio/Upmarkit-for-Davidoff-Coffee-Workshop.jpg" alt="Workshop for BMW">
    </div>
    <div class="basic-card-content">
      <h2 class="basic-card-title">Workshop for BMW</h2>
      <h4 class="basic-card-subtitle">Munich, Germany</h4>
      <p class="basic-card-description">Executive leadership workshop focusing on future mobility concepts and sustainable luxury positioning.</p>
    </div>
  </div>

  <!-- Card 3 -->
  <div class="basic-card basic-card-animate">
    <div class="basic-card-image">
      <img src="https://upmarkit.com/images/Portfolio/Upmarkit-for-Davidoff-Coffee-Workshop.jpg" alt="Workshop for Nestlé">
    </div>
    <div class="basic-card-content">
      <h2 class="basic-card-title">Workshop for Nestlé</h2>
      <h4 class="basic-card-subtitle">Vevey, Switzerland</h4>
      <p class="basic-card-description">Innovation sprint with brand managers exploring new product development and consumer trend analysis.</p>
    </div>
  </div>

  <!-- Card 4 -->
  <div class="basic-card basic-card-animate">
    <div class="basic-card-image">
      <img src="https://upmarkit.com/images/Portfolio/Upmarkit-for-Davidoff-Coffee-Workshop.jpg" alt="Workshop for Lufthansa">
    </div>
    <div class="basic-card-content">
      <h2 class="basic-card-title">Workshop for Lufthansa</h2>
      <h4 class="basic-card-subtitle">Frankfurt, Germany</h4>
      <p class="basic-card-description">Customer experience design workshop reimagining premium travel services for the next generation.</p>
    </div>
  </div>

</div>


<!-- ============================================================
     EMPTY TEMPLATE - COPY & FILL
     ============================================================ -->
<!--
<div class="basic-grid">

  <div class="basic-card basic-card-animate">
    <div class="basic-card-image">
      <img src="IMAGE_URL" alt="ALT_TEXT">
    </div>
    <div class="basic-card-content">
      <h2 class="basic-card-title">TITLE</h2>
      <h4 class="basic-card-subtitle">SUBTITLE</h4>
      <p class="basic-card-description">DESCRIPTION</p>
    </div>
  </div>

</div>
-->


<!-- ============================================================
     STYLE VARIANTS EXAMPLES
     ============================================================ -->

<!-- WITH TEAL ACCENT LINE -->
<!--
<div class="basic-card basic-card-animate basic-card-accent">
-->

<!-- WITH CORAL ACCENT LINE -->
<!--
<div class="basic-card basic-card-animate basic-card-accent basic-card-accent-coral">
-->

<!-- WITH PURPLE ACCENT LINE -->
<!--
<div class="basic-card basic-card-animate basic-card-accent basic-card-accent-purple">
-->

<!-- BORDERED (no shadow) -->
<!--
<div class="basic-card basic-card-animate basic-card-bordered">
-->

<!-- GLASSMORPHISM -->
<!--
<div class="basic-card basic-card-animate basic-card-glass">
-->

<!-- DARK MODE -->
<!--
<div class="basic-card basic-card-animate basic-card-dark">
-->

<!-- WITHOUT ANIMATION -->
<!--
<div class="basic-card">
-->


<!-- ============================================================
     GRID GAP EXAMPLES
     ============================================================ -->

<!-- SMALL GAP -->
<!--
<div class="basic-grid basic-grid-gap-sm">
-->

<!-- LARGE GAP -->
<!--
<div class="basic-grid basic-grid-gap-lg">
-->

<!-- EXTRA LARGE GAP -->
<!--
<div class="basic-grid basic-grid-gap-xl">
-->

 

Single Basic Card

Title

Subtitle

Description

<div class="basic-card basic-card-animate">
  <div class="basic-card-image">
    <img src="URL" alt="">
  </div>
  <div class="basic-card-content">
    <h2 class="basic-card-title">Title</h2>
    <h4 class="basic-card-subtitle">Subtitle</h4>
    <p class="basic-card-description">Description</p>
  </div>
</div>

WITH VIDEO

<div class="basic-card basic-card-animate">
  <div class="basic-card-video" data-video="https://www.youtube.com/watch?v=YOUR_VIDEO_ID"></div>
  <div class="basic-card-content">
    <h2 class="basic-card-title">Title</h2>
    <h4 class="basic-card-subtitle">Subtitle</h4>
    <p class="basic-card-description">Description</p>
  </div>
</div>

 

Side-Image Card

 

TITLE_HERE

SUBTITLE_HERE

ALT_TEXT_HERE

YOUR_TEXT_CONTENT_HERE text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

 

Workshop Methodology

Our proven approach to strategic innovation

Team workshop

Our workshops bring together cross-functional teams to solve complex business challenges through structured creativity. We use design thinking and collaborative ideation to unlock breakthrough solutions. Each session is carefully facilitated to ensure actionable outcomes.

STYLE VARIANTS

side-image-card-right > Image on right side
side-image-card-full  > Full width in section navigator tab
side-image-card-bordered  > Gradient border (8px) - requires side-image-card-inner wrapper
side-image-card-compact  > Less padding
side-image-card-dark  > Dark mode
side-image-card-animate  > Scroll reveal animation

EMPTY TEMPLATE (Basic - Image Left)

<div class="side-image-card side-image-card-animate">
  <div class="side-image-card-header">
    <h2 class="side-image-card-title">TITLE_HERE</h2>
    <h4 class="side-image-card-subtitle">SUBTITLE_HERE</h4>
  </div>
  <div class="side-image-card-body">
    <div class="side-image-card-image">
      <img src="IMAGE_URL_HERE" alt="ALT_TEXT_HERE">
    </div>
    <div class="side-image-card-text">
      <p>YOUR_TEXT_CONTENT_HERE</p>
    </div>
  </div>
</div>


WITH GRADIENT BORDER

<div class="side-image-card side-image-card-bordered side-image-card-animate gradient-smaragd-aquamarin">
  <div class="side-image-card-inner">
    <div class="side-image-card-header">
      <h2 class="side-image-card-title">TITLE_HERE</h2>
      <h4 class="side-image-card-subtitle">SUBTITLE_HERE</h4>
    </div>
    <div class="side-image-card-body">
      <div class="side-image-card-image">
        <img src="IMAGE_URL_HERE" alt="ALT_TEXT_HERE">
      </div>
      <div class="side-image-card-text">
        <p>YOUR_TEXT_CONTENT_HERE</p>
      </div>
    </div>
  </div>
</div>

FULL WIDTH IN SECTION NAVIGATOR TAB

<div class="side-image-card side-image-card-full side-image-card-animate">
  <div class="side-image-card-header">
    <h2 class="side-image-card-title">TITLE_HERE</h2>
    <h4 class="side-image-card-subtitle">SUBTITLE_HERE</h4>
  </div>
  <div class="side-image-card-body">
    <div class="side-image-card-image">
      <img src="IMAGE_URL_HERE" alt="ALT_TEXT_HERE">
    </div>
    <div class="side-image-card-text">
      <p>YOUR_TEXT_CONTENT_HERE</p>
    </div>
  </div>
</div>