AstroAnimate Docs — Installation, Components & API

A clean, responsive, CSS-only summary card optimized for job boards and opportunity listings.

Preview/Playground

Created by

AstroAnimate

$120k - $150k / yr

Senior Backend Engineer

Astro

---
import JobCard from "@astroanimate/core/JobCard";
---

<JobCard
  title="Senior Backend Engineer"
  rate="$120k - $150k / yr"
  company="Google"
  buttonLabel="Apply Now"
  as="a"
  href="/jobs/frontend"
  companyLogo="/images/google.png"
/>

Installation

bash

npm install @astroanimate/core

Usage

---
import JobCard from "@astroanimate/core/JobCard";
---

<JobCard />

Renders the JobCard component with AstroAnimate defaults.

Props

Prop	Type	Default	Description
`title`	`string`	`Required`	The job role or title
`rate`	`string`	`Required`	Compensation, rate, or salary range
`company`	`string`	`"Company"`	Name of the hiring company
`companyLogo`	`string`	`-`	SVG markup string or URL for the company logo
`buttonLabel`	`string`	`"View"`	Text for the call-to-action button
`as`	`"button" \| "a"`	`"button"`	HTML element to render the CTA as
`href`	`string`	`-`	Target URL (required if `as="a"`)
`class`	`string`	`""`	Additional CSS classes for the root article

Use When

Building job boards, career pages, or freelance marketplace listings
Presenting structured opportunity summaries in a grid or list
Needing a lightweight, mobile-responsive card without JavaScript overhead

Avoid When

Displaying full, long-form job descriptions (this component is intended for summaries)
Presenting dense tabular data where a standard HTML table would be more appropriate

Accessibility

Excludes the decorative logo wrapper from screen readers using aria-hidden="true" to reduce redundant announcements, as the company name is immediately adjacent
Implements clear focus-visible styling for robust keyboard navigation on the CTA
Respects prefers-reduced-motion: reduce by disabling hover and active scaling transitions on the button

Performance

Zero Hydration: Operates entirely on CSS with no JavaScript required
Responsive CSS: Adjusts internal layouts (column to row) dynamically via CSS media queries without layout thrashing

Credits

Credit to @Prashanth

JobCard NEW