Card Component

Card Component

Axiom01's card component is a flexible and extensible content container. It's designed to group related information in a visually appealing and easily digestible format, perfect for dashboards, product listings, or blog posts.

Basic Card

<article class="card">
		 <header>
				 <h3>Card Title</h3>
		 </header>
		 <main>
				 <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		 </main>
		 <footer>
				 <a href="#" class="button primary small">Go somewhere</a>
		 </footer>
 </article>

Card with Image

<article class="card">
		 <img src="https://via.placeholder.com/400x200/22223b/e0e1dd?text=Card+Image" alt="Card image cap">
		 <header>
				 <h3>Image Card Title</h3>
		 </header>
		 <main>
				 <p>This card has an image at the top, perfect for showcasing products, articles, or portfolio items.</p>
		 </main>
		 <footer>
				 <a href="#" class="button secondary small">Read More</a>
		 </footer>
 </article>

Card with Custom Header and Footer Content

<article class="card">
		 <header>
				 <p>Featured</p>
		 </header>
		 <main>
				 <h3>Special Title Treatment</h3>
				 <p>With supporting text below as a natural lead-in to additional content.</p>
		 </main>
		 <footer>
				 <p class="small-text">2 days ago</p>
				 <a href="#" class="button primary small">Go somewhere</a>
		 </footer>
 </article>