Paywall

Axiom01 provides a flexible and customizable paywall component to restrict access to premium content. This component hel...

Live Example

Unlock Premium Content

This content is exclusive to premium subscribers.

    •

    Already a member? Restore Purchase

    HTML Structure

    <!-- Apply the .locked class to your premium container -->
<section class="locked">
	<!-- Premium Content Goes Here -->
	
	<!-- The Paywall Overlay Card -->
	<article class="card glass">
		<span class="axicon render" data-name="Lock" aria-hidden="true"></span>
		<h3>Unlock Premium Content</h3>
		<p>This content is exclusive to our premium subscribers. Join now to get full access!</p>
		<menu class="actions">
			<li><button class="primary">Subscribe Now</button></li>
			<li><button class="outline">Log In</button></li>
		</menu>
		<p><small>Already a member? <a href="#">Restore Purchase</a></small></p>
	</article>
</section>

    Styling

    Axiom01 provides the .locked semantic container class to handle paywalls and restricted content visually.

    • .locked: Automatically applies an absolute blur overlay using the `::after` pseudo-element over its contents.
    • .card.glass: Used for the prompt card to give it a frosted glass effect that looks great against blurred content. It automatically centers itself inside the .locked container.

    JavaScript Integration

    While the paywall is primarily a visual component, you will need JavaScript to:

    • Dynamically show/hide the paywall based on user authentication or subscription status.
    • Handle interactions with "Subscribe Now" and "Log In" buttons, redirecting users or triggering authentication flows.

    Accessibility

    Ensure the paywall is accessible:
    • Use appropriate ARIA roles if the paywall acts as a modal dialog.
    • Ensure keyboard navigation is logical within the paywall.
    • Provide clear and concise text for all elements.

    Customization

    Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. You can adjust the background of the overlay, the card's appearance, and the button styles to match your branding.

    Features

    • Semantic Structure - Built with native HTML5 elements for maximum reliability.
    • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
    • Fully Responsive - Scales perfectly from mobile to desktop screens.
    • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
    • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

    Use Cases

    The Paywall component is designed for versatile implementation across modern web applications. Ideal scenarios include:

    • Dashboards & Admin Panels - Structured data presentation and interface control.
    • Content Management Systems - Organizing complex information hierarchies and media.
    • E-Commerce Platforms - Enhancing product discovery and user workflows.
    • Marketing Sites - Highlighting key product offerings cleanly and effectively.
    • SaaS Applications - Delivering native-feeling, responsive app experiences.