Component Library

Gk Card Library

36 drop-in card patterns across seven groups. Black, white, green and orange - every card scoped, responsive and dependency-free, with no box-shadows. Scroll through the full set below; the cards marked “moves” animate on their own.

36
patterns
7
groups
0
box-shadows
100%
paste-ready
#0a0a0a#39FF14#39FF14#ffffff
A

Content cards

Everyday workhorses - articles, services, updates and features.

GkCard01Rail reveal

News, insights and tech-update grids. A clean white card with an orange edge that slides in on hover.

Data / Privacy

New DSIT privacy notice for health-data research

Companies handling sensitive health data must address compliance rigorously in campaign negotiations.

Palette White · orangeMotion Hover lift + edge revealLayout Standard card
Order: "Use GkCard01"
GkCard02Inverted feature

The standout item in a grid. Black fill with a soft green radial glow in the corner.

Featured

Structural marketing for founders & SaaS

Growth thinking at the centre of your operations, not bolted on after the fact.

Palette Black · greenMotion Hover lift, green borderLayout Standard card
Order: "Use GkCard02"
GkCard03Glass

Dark sections only. A translucent, blurred surface that sits over a dot-grid background.

Compliance & risk

Data, governance and risk set up properly as you scale.

Palette Glass · greenMotion Hover lift + tintLayout Standard card
Order: "Use GkCard03"
GkCard04Animated border● moves

Premium or highlighted tiers. A black card framed by a continuously spinning green conic border.

Premium

Advertising direction for founders

Founder and leadership support on the advertising side of scaling.

Palette Black · green gradientMotion Rotating conic borderLayout Standard card
Order: "Use GkCard04"
GkCard05Spotlight

Interactive dark grids. A green glow rises on hover (the live build follows the cursor).

Live deals

Negotiation support

Hover the card to bring up the green spotlight glow.

Palette Black · greenMotion Cursor-following glowLayout Standard card
Order: "Use GkCard05"
GkCard06Editorial

Blog and insights listings. White card with an orange top rule and an underline-draw link.

Insights · 6 min read

What founders get wrong about their first SaaS campaign

The clauses that quietly cost you leverage long before a deal goes wrong.

Read article
Palette White · orangeMotion Underline draw + liftLayout Standard card
Order: "Use GkCard06"
B

Shapes - not all square

Circles, capsules, angled cuts and two-tone splits.

GkCard07Orbit circle

A single hero statistic. Circular green progress ring echoing the home-page hero.

75%
faster campaign turnaround with embedded advertising
Palette White · green · orangeMotion Static ringLayout Circle
Order: "Use GkCard07"
GkCard08Pill / capsule

Feature lists and “what’s included”. Stack as many rounded rows as you need.

Campaign review & redlining

One-off or ongoing, fixed scope.

Quick-turn commercial advice

Answers when the deal can't wait.

Palette White · black · greenMotion Hover liftLayout Capsule / list
Order: "Use GkCard08"
GkCard09Diagonal cut

Phase or step callouts. A black card with an angled base and a green rail.

PHASE II

While deals are moving

Advertising stays close to the work, not behind it.

Palette Black · greenMotion Hover liftLayout Angled / clip-path
Order: "Use GkCard09"
GkCard10Split black / white

Service rows. A bold dark label panel paired with a readable light body.

Service

Campaigns & commercial deals

Drafting, reviewing and negotiating SaaS agreements.

Explore →
Palette Black · white · orangeMotion Hover liftLayout Two-tone split
Order: "Use GkCard10"
C

Metric & stat cards

Make the numbers land - big type, bar charts, dials.

GkCard11Big number

Headline figures in a stat row. Oversized number with a short label.

40%
reduction in review cycles after embedding advertising early
Palette White · orangeMotion Hover liftLayout Stat
Order: "Use GkCard11"
GkCard12Sparkline

Growth and trend metrics. Dark card with a green bar chart - set each bar height inline.

128▲ 23%
Deals supported this year
Palette Black · greenMotion Bars brighten on hoverLayout Stat + chart
Order: "Use GkCard12"
GkCard13Progress ring

Completion or readiness scores with a label beside the dial.

75%

Compliance readiness

Across data, governance and campaigns.

Palette White · orangeMotion Static dialLayout Stat + dial
Order: "Use GkCard13"
D

Bento grid

Mixed tile sizes in one balanced block.

GkCard14Bento grid

Homepage feature sections and update hubs. Mixed tile sizes; self-stacks on mobile.

Featured update

UAE updates AI compliance framework

The TDRA emphasises ethical AI deployment - structure AI campaigns carefully to avoid liability.

South Africa

Competition Commission examines AI market impact

Stat
5
US

FTC & CPRA enforcement

Procurement · UK

EPS Assist Me tool launched to streamline supplier onboarding

Palette Black · orange · white · greenMotion Tile hover liftLayout Bento grid
Order: "Use GkCard14"
E

Timelines

Twelve styles - vertical, horizontal, alternating, card-based, rounded, square, dot markers and self-animating.

GkCard15Vertical timeline

Process steps and phases. Dashed green rail; dots fill in on hover.

Phase I

Before direction hardens

We get involved while options are still open.

Phase II

While deals are moving

Advertising stays close, not behind.

Phase III

As complexity increases

We're already there when disputes arrive.

Palette White · green · orangeMarker Ring dotsLayout Vertical
Order: "Use GkCard15"
GkCard16Horizontal stepper

A 3–4 step “how it works” row. Numbered dots on a dashed rail.

1

You & your business

We learn how you operate.

2

Green Kow embeds

Advertising works inside your rhythm.

3

Deals supported

Decisions shaped early.

4

Scale up

Complexity handled in context.

Palette White · greenMarker Numbered dotsLayout Horizontal
Order: "Use GkCard16"
GkCard17Alternating timeline

A richer, story-style sequence. Boxes alternate left/right of a central green line.

STEP 01

Reviewing campaigns

In a way that fits SaaS and tech models.

STEP 02

Negotiation support

As part of live deals, not in isolation.

STEP 03

Data & compliance

Structured around reality, not templates.

Palette White · green · orangeMarker Centre dotsLayout Alternating
Order: "Use GkCard17"
GkCard18Compact orbit timeline

A compact, decorative phase diagram of concentric green arcs.

Phase I

Before direction hardens

Palette White · green · orangeMarker Concentric arcsLayout Rings
Order: "Use GkCard18"
GkCard29Card rail · rounded

A vertical rail where each step is an actual rounded card with an orange edge. Cards nudge right on hover.

Phase I

Before direction hardens

We get involved while options are still open, shaping structure and deal terms early.

Phase II

While deals are moving

Terms change and pressure builds. Advertising stays close to that, not behind it.

Phase III

As complexity increases

Disputes, regulation and strain arrive, and we are already there.

Shape Rounded cardsMarker Ring dotLayout Vertical rail
Order: "Use GkCard29"
GkCard30Card rail · square

The sharp, editorial version. Square-cornered cards with diamond markers; cards invert to black on hover.

STEP 01

Reviewing campaigns

In a way that fits SaaS and technology business models.

STEP 02

Negotiation support

As part of live deals, not in isolation.

STEP 03

Data & compliance

Structured around reality, not templates.

Shape Square cardsMarker DiamondLayout Vertical rail
Order: "Use GkCard30"
GkCard31Dot ladder · alternating

Big numbered dots down a centre line, with rounded cards alternating left and right.

1

You & your business

We get to know how you actually operate.

2

Green Kow embeds

Working inside your rhythm, not as an outside provider.

3

Deals supported

Decisions shaped early, while flexibility still exists.

4

Scale with confidence

Complexity handled in context as you grow.

Shape Rounded cardsMarker Numbered dotsLayout Alternating
Order: "Use GkCard31"
GkCard32Auto card scroll● moves

A row of phase cards that scrolls on its own, looping continuously and pausing on hover.

Phase I

Before direction hardens

We get involved while options are still open.

Phase II

While deals are moving

Support stays close to the deal, not behind it.

Phase III

As complexity increases

We are already there when disputes arrive.

Phase IV

Scaling with confidence

Governance and decisions handled in context.

Shape Rounded cardsMotion Auto scroll (loops)Layout Horizontal
Order: "Use GkCard32"
GkCard33Auto progress stepper● moves

A horizontal stepper where the green line fills across and each dot lights up in sequence, then loops.

1

You & your business

We learn how you operate.

2

Green Kow embeds

Advertising inside your rhythm.

3

Deals supported

Decisions shaped early.

4

Scale up

Complexity in context.

Shape Dots + labelsMotion Fill + sequence (loops)Layout Horizontal
Order: "Use GkCard33"
GkCard34Milestone cards

Horizontal cards, each topped with a green number badge, connected by a dashed rail behind.

1

Discovery

We map how your business runs and where the advertising pressure sits.

2

Embed

Advertising works inside your team and your campaign pipeline.

3

Scale

Governance and structure that grow with you.

Shape Rounded cardsMarker Number badgeLayout Horizontal
Order: "Use GkCard34"
GkCard35Auto vertical draw● moves

The rail draws itself downward and each dot pops in sequence, then loops. Great as a scroll feature.

Phase I

Before direction hardens

Involved while options are still open.

Phase II

While deals are moving

Support stays close, not behind.

Phase III

As complexity increases

Already there when disputes arrive.

Phase IV

Scaling with confidence

Decisions handled in context.

Shape Dots + textMotion Self-draw + pop (loops)Layout Vertical
Order: "Use GkCard35"
GkCard36Column pillars

Three phase columns side by side with a sharp top rule that fills orange on hover.

Phase I

Before direction hardens

We get involved while options are still open, so structure and deal terms are shaped early.

Phase II

While deals are moving

We work alongside you as deals happen. Advertising stays close to the pace, not behind it.

Phase III

As complexity increases

Disputes, regulation and internal strain arrive, and we are already in the room.

Shape Square columnsMarker Top rule fillLayout Columns
Order: "Use GkCard36"
F

Editorial, quote & process

Testimonials, category indexes, process steps and icon features.

GkCard19Quote

Testimonials and pull quotes. Black card with a green quote mark and avatar.

They're there while decisions are being made, not brought in after the fact.
Founder, SaaS scale-upSeries A
Palette Black · greenMotion StaticLayout Quote
Order: "Use GkCard19"
GkCard20Category index

Topic or category landing tiles with a count and tag chips.

12

Commercial deals

Drafting, reviewing and negotiating.

SaaSNDAsSuppliers
Palette White · orangeMotion Hover liftLayout Index card
Order: "Use GkCard20"
GkCard21Process

Numbered steps. A large translucent ghost number sits behind the text.

01

Get involved early

Bring growth thinking in before decisions are hard to change.

Palette White · orangeMotion Border on hoverLayout Process card
Order: "Use GkCard21"
GkCard22Icon feature

Service or benefit grids. A green gradient icon tile above the text.

Founder & advertising support

What matters now, what can wait, how to structure it.

Palette White · greenMotion Hover liftLayout Icon card
Order: "Use GkCard22"
G

Flip & motion

Flips, an auto-advancing carousel, a ticker, hover reveals.

GkCard23Flip · click

Values or benefits you want to reveal. Orange front, black/green back. Click the card to flip.

Palette Orange · black · greenMotion Click flip (3D)Layout Flip card
Order: "Use GkCard23"
GkCard24Flip · hover

Desktop value grids. Same faces as the click flip, but flips on hover.

Early, not reactive
Hover to flip ↻
While flexibility exists
We get involved before direction has hardened.
Palette Orange · black · greenMotion Hover flip (3D)Layout Flip card
Order: "Use GkCard24"
GkCard25Self-advancing timeline● moves

A phase story that plays itself. Auto-advances with a progress bar; pauses on hover.

Phase I

Before direction hardens

We get involved while options are still open - structure and deal terms shaped early.

Phase II

While deals are moving

Terms change, pressure builds - advertising support stays close to that, not behind it.

Phase III

As complexity increases

Disputes, regulation and strain arrive - and we're already there.

Palette Black · greenMotion Auto carouselLayout Carousel
Order: "Use GkCard25"
GkCard26Marquee ticker● moves

A live update strip. Scrolls continuously and pauses on hover.

UK · Privacy

DSIT privacy notice for health-data research

UAE · AI Risk

TDRA updates AI compliance framework

US · Privacy

CPRA enforcement steps up

SA · AI Risk

Competition Commission examines AI

Palette White · orangeMotion Infinite scrollLayout Ticker
Order: "Use GkCard26"
GkCard27Hover-reveal

Dark feature tiles. The title sits at the bottom and slides up to reveal the copy on hover.

01

Bring growth thinking in early

Embedded support shapes decisions while commercial flexibility still exists.

Palette Black · greenMotion Slide-up revealLayout Reveal card
Order: "Use GkCard27"
GkCard28Count-up

Stat rows with impact. On the live page the number counts up from zero when scrolled into view.

40%
reduction in review cycles - counts up when scrolled into view
Palette White · orangeMotion Count-up on scrollLayout Stat
Order: "Use GkCard28"