Crane Design System

Components

These are the reusable building blocks currently implemented in the Next site. Component examples are rendered from the same code that powers the actual pages.

Navigation and Page Introduction

Breadcrumbs

Hero

Aerospace & Defense Logistics

Mission-Critical Logistics for Aerospace

From AOG response to MRO supply chains, Crane delivers precision logistics for one of the world's most demanding industries.

  • ITAR Compliant
  • 24/7 AOG Response
  • Global Coverage

Buttons and Calls to Action

Button Variants

Use one green primary action per section; dark secondary buttons are reserved for dark surfaces and must retain white text contrast.

CTA Section

Standard high-intent conversion block.

Get Started

Ready to transform your supply chain?

Connect with Crane Worldwide logistics experts today.

Cards and Metrics

Default Card

Air Freight

Priority routing and managed global air cargo for critical shipments.

Proof Card

99.7%
On-time performance

Metric

120+
Countries

Card Contracts

Structured card contracts keep service, industry, insight, and location modules consistent without asking page authors to compose markup.

Visual Content Card

Use when a service, industry, or insight card should carry an operational image header.

Motion Rules

Reveal page introductions

Motion should clarify hierarchy and interaction without hiding SEO-critical content.

Lift interactive cards

Motion should clarify hierarchy and interaction without hiding SEO-critical content.

Fade and slide menus

Motion should clarify hierarchy and interaction without hiding SEO-critical content.

Component Rules

Create a Component When

  • The pattern appears in at least two templates.
  • It represents a distinct structure or interaction.
  • It cannot be handled as a variant of an existing component.

Avoid

  • One-off visual wrappers.
  • Component variants that only rename content.
  • Editor-controlled layout choices.
  • Client components for static content.