Component Showcase
A visual guide for content editors - all components and design variants.
Hero component showcase
Empowering Crews Worldwide
Build adaptable learning pathways for maritime and offshore teams with brand-consistent content, measurable outcomes, and deployment-ready training assets.
Small hero component showcase
Supporting Editors With Clear Layout References
This compact hero demonstrates the centered headline treatment used for internal landing pages, section openers, and campaign-specific content hubs.
Commercial pillars component showcase
The Core Pillars Behind Our Learning Offer
Each pillar shows how the card layout balances imagery, iconography, supporting copy, and a compact call to action.
Competency Design
Translate operational requirements into role-based pathways with clear milestones and scalable delivery.
Learn MoreBlended Delivery
Combine digital modules, practical workshops, and coaching interventions without losing consistency.
Learn MoreEvidence & Reporting
Give training leaders accessible reporting that ties learning activity back to capability goals.
Learn MoreChallenge response component showcase
Where Teams Struggle And How We Respond
This section pairs challenge cards with a flexible response area to communicate diagnosis, solution framing, and delivery logic in one pass.
Fragmented Standards
Different crews, regions, and duty profiles create uneven baseline performance.
Operational Pressure
Training has to fit around vessel schedules, asset availability, and live operations.
Audit Visibility
Leaders need evidence that learning outcomes are actually improving readiness.
Our Response Framework
Programme Structure
- ✓Role-based learning pathways mapped to competency requirements.
- ✓Practical assessments built around operational scenarios.
- ✓Reusable publishing blocks for consistent editor output.
Leadership Visibility
- ✓Progress dashboards aligned to audit and readiness reporting.
- ✓Feedback loops that inform refresh cycles and course updates.
- ✓Clear evidence of what was delivered, completed, and retained.
Structured learning works best when the delivery model is as clear as the curriculum.
Where Teams Struggle And How We Respond
This section pairs challenge cards with a flexible response area to communicate diagnosis, solution framing, and delivery logic in one pass.
Fragmented Standards
Different crews, regions, and duty profiles create uneven baseline performance.
Operational Pressure
Training has to fit around vessel schedules, asset availability, and live operations.
Audit Visibility
Leaders need evidence that learning outcomes are actually improving readiness.
Where Teams Struggle And How We Respond
This section pairs challenge cards with a flexible response area to communicate diagnosis, solution framing, and delivery logic in one pass.
Fragmented Standards
Different crews, regions, and duty profiles create uneven baseline performance.
Operational Pressure
Training has to fit around vessel schedules, asset availability, and live operations.
Audit Visibility
Leaders need evidence that learning outcomes are actually improving readiness.
Where Teams Struggle And How We Respond
This section pairs challenge cards with a flexible response area to communicate diagnosis, solution framing, and delivery logic in one pass.
Fragmented Standards
Different crews, regions, and duty profiles create uneven baseline performance.
Operational Pressure
Training has to fit around vessel schedules, asset availability, and live operations.
Audit Visibility
Leaders need evidence that learning outcomes are actually improving readiness.
Process steps component showcase
A Simple Three-Step Engagement Flow
This layout is used when a concise process explanation needs equal-width columns and a lightweight visual hierarchy.
Discover
Clarify audience, operational context, and the problem the content needs to solve.
Design
Shape the right sequence of components, messaging, and calls to action.
Deploy
Publish consistent pages and support iterative improvement through feedback.
Steps timeline component showcase
Delivery Roadmap
The vertical treatment supports sequential milestones, state labels, and longer supporting descriptions.
Discovery Phase
CompletedStakeholder Alignment
Workshop core objectives, audience needs, and the specific outcomes the page or programme should support.
Content Build
In ProgressVariant Mapping
Choose the component patterns that best express hierarchy, narrative flow, and calls to action.
Launch Prep
PlannedReview & QA
Confirm copy, links, and design consistency before editors adopt the showcase in production.
Ongoing Maintenance
PlannedIteration Cycle
Use the page as a shared reference when adding new layouts or retiring old patterns.
Horizontal Steps Variant
This version is better suited to short, parallel messaging where each step needs equal emphasis.
Discover
Clarify audience, operational context, and the problem the content needs to solve.
Design
Shape the right sequence of components, messaging, and calls to action.
Deploy
Publish consistent pages and support iterative improvement through feedback.
Content boxes component showcase
Feature Boxes With Icon-Led Messaging
The four-box grid works well for capability summaries, service categories, and clear editorial grouping.
Safety & Compliance
Keep required training visible, current, and easy to assign across locations.
Marine Operations
Support onboard teams with scenario-based modules aligned to real procedures.
Learning Pathways
Guide learners from onboarding to advanced capability using structured progression.
Performance Insight
Surface the reporting signals leaders need to track completion and readiness.
Feature Boxes With Icon-Led Messaging
The four-box grid works well for capability summaries, service categories, and clear editorial grouping.
Safety & Compliance
Keep required training visible, current, and easy to assign across locations.
Marine Operations
Support onboard teams with scenario-based modules aligned to real procedures.
Learning Pathways
Guide learners from onboarding to advanced capability using structured progression.
Performance Insight
Surface the reporting signals leaders need to track completion and readiness.
Content box multi-column component showcase
A Single Box With Three Supporting Columns
Use this format when related ideas need a shared wrapper but still benefit from distinct subheadings.
Competency Framework
Define expected standards by role, vessel, or operating environment so training content maps to a clear capability model.
Assessment Methods
Blend checks, practical tasks, and manager review points to capture more than simple completion metrics.
Reporting
Present outcomes in a format leaders can use for planning, assurance, and continuous improvement conversations.
A Single Box With Three Supporting Columns
Use this format when related ideas need a shared wrapper but still benefit from distinct subheadings.
Competency Framework
Define expected standards by role, vessel, or operating environment so training content maps to a clear capability model.
Assessment Methods
Blend checks, practical tasks, and manager review points to capture more than simple completion metrics.
Reporting
Present outcomes in a format leaders can use for planning, assurance, and continuous improvement conversations.
Accent list component showcase
Left-Accent Content List
A straightforward pattern for editorial summaries, service principles, or grouped selling points.
Role-specific onboarding
Introduce new starters with the exact content relevant to their context, responsibilities, and risk profile.
Refresher pathways
Keep recurring learning concise, visible, and easy for managers to reassign when needed.
Campaign support
Wrap timely communications in a format that is more editorial than a plain list of bullet points.
Evidence-based updates
Feed lessons learned back into the content model so repeat publishing gets stronger over time.
Left-Accent Content List
A straightforward pattern for editorial summaries, service principles, or grouped selling points.
Role-specific onboarding
Introduce new starters with the exact content relevant to their context, responsibilities, and risk profile.
Refresher pathways
Keep recurring learning concise, visible, and easy for managers to reassign when needed.
Campaign support
Wrap timely communications in a format that is more editorial than a plain list of bullet points.
Evidence-based updates
Feed lessons learned back into the content model so repeat publishing gets stronger over time.
Case studies component showcase
Case Study Cards
This layout combines an image-led introduction with structured challenge, solution, and outcome messaging.
North Sea Shipping Group
Challenge
Training materials were scattered across teams, making it hard to enforce a common competency standard.
Solution
We rebuilt the learning flow around role-based pathways and reusable page components for editors.
Outcome
Leadership gained a consistent way to communicate training requirements and track uptake across crews.
Bluewater Energy Services
Challenge
Operational updates needed to reach distributed staff quickly without sacrificing clarity or governance.
Solution
A component-led publishing model allowed the team to assemble pages from proven content patterns.
Outcome
Editors reduced production time while improving visual consistency and message recall.
Quote cards component showcase
Testimonial and Pull-Quote Cards
Use these cards for social proof, stakeholder feedback, or editorial quotations that need equal visual treatment.
The platform gave our crews a consistent training baseline without adding operational friction.
Elena Morris
Training Director, North Atlantic Fleet
We moved from reactive refreshers to a planned competency journey with clear reporting.
David Chen
Head of L&D, Offshore Energy Group
Editors can now see exactly how each reusable block behaves before building a page.
Mina Larsen
Content Operations Lead, ISG
Testimonial and Pull-Quote Cards
Use these cards for social proof, stakeholder feedback, or editorial quotations that need equal visual treatment.
The platform gave our crews a consistent training baseline without adding operational friction.
Elena Morris
Training Director, North Atlantic Fleet
We moved from reactive refreshers to a planned competency journey with clear reporting.
David Chen
Head of L&D, Offshore Energy Group
Editors can now see exactly how each reusable block behaves before building a page.
Mina Larsen
Content Operations Lead, ISG
Call to action component showcase
Ready to Standardise Learning Across Every Team?
Pair structured pathways, measurable assessments, and editor-friendly page building in one consistent content system.
Talk to Our TeamReady to Standardise Learning Across Every Team?
Pair structured pathways, measurable assessments, and editor-friendly page building in one consistent content system.
Trusted by maritime, offshore, and energy organisations operating across multiple regions.
Ready to Standardise Learning Across Every Team?
Pair structured pathways, measurable assessments, and editor-friendly page building in one consistent content system.
Talk to Our TeamReady to Standardise Learning Across Every Team?
Pair structured pathways, measurable assessments, and editor-friendly page building in one consistent content system.
Talk to Our TeamReady to Standardise Learning Across Every Team?
Pair structured pathways, measurable assessments, and editor-friendly page building in one consistent content system.
Talk to Our TeamReady to Standardise Learning Across Every Team?
Pair structured pathways, measurable assessments, and editor-friendly page building in one consistent content system.
Talk to Our TeamContact call to action component showcase
Need a More Structured Learning Journey?
This CTA combines a high-contrast panel, dual actions, and an optional three-step explainer below the primary message.
What Happens Next
Initial Call
We clarify objectives, audiences, and the type of learning experience you need.
Solution Framing
We map the right blend of components, pathways, and reporting requirements.
Rollout Plan
You get a practical recommendation for launch, governance, and iteration.
Contact form component showcase
Contact Form Layout With Static Mock Form
.ei-contact-form field styling.Talk to the Learning Team
Phone
+44 (0) 1234 567 890Location
Aberdeen, UK with support across global maritime and energy operations.
Office Hours
Monday - Thursday: 08:30 - 17:30
Friday: 08:30 - 16:00
Typical response time: within one business day for training and project enquiries.
Send a Message
Text area component showcase
Rich Text Area Demonstration
This section shows the standard rich text wrapper used for editor-managed long-form content. It supports clear hierarchy, body copy rhythm, and inline links such as contact prompts.
Supporting Subheading
Use the text area when a page needs a narrative section rather than a highly structured card or grid layout.
- Unordered lists inherit consistent spacing and indentation.
- Links remain visible within body copy.
- Strong text adds emphasis without breaking the flow.
Ordered Guidance
- Introduce the topic clearly.
- Use supporting subheadings to break up longer sections.
- Keep the most important action or takeaway easy to find.
Good editorial structure helps content editors move faster without sacrificing clarity or brand consistency.
Final Note
The wrapper also handles separators and mixed rich text content without requiring bespoke styling on each page.
Image carousel component showcase
One Image At A Time
Default mode. Auto-rotates every few seconds, pausing automatically on hover or keyboard focus, with arrow navigation and dot indicators. Best for hero-style galleries.
Multiple Images Per View
Shows several images side by side — 1 on mobile, 2 on tablet, and the editor-chosen count (here, 3) on desktop. Dots and auto-rotation are both optional per instance; this example also demonstrates the full-width layout option.
Same Slider, Standard Width
The same slider settings as above, but with Full Width switched off — it stays within the normal content column instead of bleeding to the page edge.
Full Width Works In Either Mode
The full-width option isn't limited to the slider — a single-image carousel can bleed edge-to-edge too, with a fixed 600px height here instead of the responsive aspect ratio. This example also shows arrows turned off, leaving just the dots for navigation.