Overlays legalverificationoverlay

Age Gate Modal

Splash overlay for age-restricted content verification.

Age Verification

Please confirm you are 18 or older to view this site.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { AgeGateModal } from 'astro-component-kit';
---

<AgeVerificationOverlay>Content</AgeVerificationOverlay>
--- import { AgeGateModal } from 'astro-component-kit'; --- <AgeVerificationOverlay>Content</AgeVerificationOverlay>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/AgeGateModal.astro and paste the following code:

astro 
---
---
<div class="age-gate">
  <div class="age-card">
    <h2>Age Verification</h2>
    <p>Please confirm you are 18 or older to view this site.</p>
    <div class="acts-row"><button class="no">Exit</button><button class="yes">I am 18+</button></div>
  </div>
</div>
<style>
  .age-gate { position: fixed; inset: 0; background: #000; z-index: 9999; display: grid; place-items: center; }
  .age-card { text-align: center; color: #fff; max-width: 350px; padding: 2rem; }
  h2 { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; }
  p { color: #94a3b8; line-height: 1.6; margin-bottom: 2.5rem; }
  .acts-row { display: flex; gap: 1rem; }
  button { flex: 1; padding: 1rem; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
  .no { background: #1e293b; color: #fff; }
  .yes { background: #6366f1; color: #fff; }
  button:hover { transform: translateY(-2px); }
</style>
--- --- <div class="age-gate"> <div class="age-card"> <h2>Age Verification</h2> <p>Please confirm you are 18 or older to view this site.</p> <div class="acts-row"><button class="no">Exit</button><button class="yes">I am 18+</button></div> </div> </div> <style> .age-gate { position: fixed; inset: 0; background: #000; z-index: 9999; display: grid; place-items: center; } .age-card { text-align: center; color: #fff; max-width: 350px; padding: 2rem; } h2 { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; } p { color: #94a3b8; line-height: 1.6; margin-bottom: 2.5rem; } .acts-row { display: flex; gap: 1rem; } button { flex: 1; padding: 1rem; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; } .no { background: #1e293b; color: #fff; } .yes { background: #6366f1; color: #fff; } button:hover { transform: translateY(-2px); } </style>

Quick Info

Category
Overlays
Filename
AgeGateModal.astro
Dependencies
None — pure Astro + CSS
Tags
legalverificationoverlay