Feature Grid

Overview

Basic Usage

<div class="features">
				<article class="card ghost">
				<span class="axicon render" data-name="rocket" aria-hidden="true"></span>
				<h3>Lightning Fast</h3>
				<p>Optimized for performance...</p>
				</article>
				<!-- More features -->
				</div>

Feature Types

With Axicons

With Emoji Icons

Grid Sizes

6-Feature Grid

Component Structure

Use Cases

• Product Features: Showcase product capabilities and benefits
• Service Offerings: Display different service tiers or options
• Company Values: Highlight organizational principles
• Team Capabilities: Display team skills and expertise
• Process Steps: Show workflow or methodology steps
• Pricing Tiers: Differentiate between service levels
• Integration Showcase: Show supported integrations

Styling & Customization

/* Adjust grid columns */
				.features {
				grid-template-columns: repeat(3, 1fr);
				}

				/* Customize feature card appearance */
				.feature {
				background-color: #f5f5f5;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}

				/* Change icon color */
				.feature .axicon {
				color: var(--a-color-secondary);
				}

				/* Remove hover effect */
				.feature:hover {
				transform: none;
				box-shadow: var(--a-shadow-medium);
				}

Responsive Behavior

The feature grid automatically adapts to screen size:

• Mobile (<576px): 1 column layout
• Tablet (576px-768px): 2 column layout
• Desktop (>768px): 3+ column layout based on parent width

Uses CSS Grid with auto-fit for automatic responsiveness with a minimum width of 280px per card.

Icon Integration

Axicons

<span class="axicon render" data-name="rocket" aria-hidden="true"></span>
				<span class="axicon render" data-name="shield-alt" aria-hidden="true"></span>
				<span class="axicon render" data-name="lock" aria-hidden="true"></span>

Inline SVG Icons

<svg class="" width="48" height="48">
				<use xlink:href="#icon-name"></use>
				</svg>

Emoji Icons

<span class="">🎨</span>
				<span class="">⚡</span>

Advanced Examples

2-Column Grid

<div class="features">
				<!-- Features here -->
				</div>

Feature Grid with Custom Spacing

<div class="features">
				<!-- Features here -->
				</div>

Features with Links

<a href="/features/fast" class="feature">
				<span class="axicon render" data-name="rocket" aria-hidden="true"></span>
				<h3>Lightning Fast</h3>
				<p>Optimized for performance...</p>
				</a>

Accessibility

• Semantic HTML: Uses <article> elements for proper structure
• Heading Hierarchy: Uses <h3> for consistent hierarchy
• Icon Accessibility: Decorative Axicons should be marked aria-hidden="true" when the text already conveys meaning.
• Focus States: Cards show focus indicators for keyboard navigation
• Link Cards: If cards are links, wrap entire content properly
• Responsive: Typography and spacing scale appropriately

Integration Examples

Full Feature Section

<section>
				<h2>Why Choose Axiom01?</h2>
				<p>These features set us apart from the competition.</p>

				<div class="features">
				<article class="card ghost">
				<!-- Feature content -->
				</article>
				</div>
				</section>

Combined with CTA

<section>
				<h2>Our Platform Features</h2>
				<div class="features">
				<!-- Features -->
				</div>
				</section>

				<section class="cta primary">
				<h2>Ready to experience these features?</h2>
				<a href="#" class="secondary">Get Started</a>
				</section>