Elements

Components

Alkaline features more than 24 custom components , along with a concise design and typography system.

Title

Several configurations are available for the Title component.

Gradient Title

With Background

Logo Logo Shown

Page Header

Multiple configuration options make it easy to create a variety of headers.

Page Header

Lorem ipsum dolor sit amet, Mauris fringilla, nunc at tincidunt fermentum, turpis nunc Max Weinberg, et facilisis leo magna eget nunc. Integer Sona Movsesian, lorem a facilisis fermentum, justo orci.

Page Header

Refresh to view the animation: Lorem ipsum dolor sit amet, Conan O'Brien consectetur adipiscing elit. Sed ut urna nec purus lacinia tincidunt, nec Andy Richter. Vivamus efficitur.

ALK Logo

Cards

There are several configurations available for the card component. These configuration options should make it easy to build a variety of cards.

Card

Card with no shadow.

Card

Card with medium shadow.

Card

Card with large shadow.

Card

Alt Card with no shadow.

Card

Alt card with medium shadow.

Card

Alt card with large shadow.

Author with socials

A variety of social icons are available for the author component. Easily switch to your favorite icon library.

Jeff Goldblum
test_user_behance test_user_bluesky test_user_codepen test_user_discord test_user_dribbble test_user_email test_user_evernote test_user_facebook test_user_flickr test_user_github test_user_gitlab test_user_global test_user_instagram test_user_line test_user_linkedin test_user_mastodon test_user_medium test_user_messenger test_user_notion test_user_patreon test_user_pinterest test_user_reddit test_user_rss test_user_skype test_user_slack test_user_snapchat test_user_soundcloud test_user_spotify test_user_telegram test_user_threads test_user_tiktok test_user_trello test_user_tumblr test_user_twitch test_user_twitter test_user_twitter-x test_user_vimeo test_user_vk test_user_web test_user_wechat test_user_whatsapp test_user_youtube

Tooltip

Available in two different styles.

Hover me
Hover me

404

A basic 404 page is included.

Not all who wonder are lost, but if they are, they'll get a nice 404 message.

Typography

Alkaline comes with built-in typography, layouts, and essential styling powered by Tailwind CSS. You can easily customize or remove any styling to match your needs.

Paragraphs

Lorem ipsum dolor sit amet, Conan O'Brien consectetur adipiscing elit. Sed ut urna nec purus lacinia tincidunt nec Andy Richter. Vivamus efficitur, risus at vehicula fermentum, eros magna Matt O'Brien, non tincidunt lacus magna at eros. Nulla facilisi. In hac habitasse platea dictumst."

Lorem ipsum dolor sit amet, Conan O'Brien consectetur adipiscing elit. Sed ut urna nec purus lacinia tincidunt nec Andy Richter. Vivamus efficitur, risus at vehicula fermentum, eros magna Matt O'Brien, non tincidunt lacus magna at eros. Nulla facilisi. In hac habitasse platea dictumst." nec.

Lists

Unordered List

  • Item 1
  • Item 2
  • Item 3

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Blockquotes

Conan O'Brien consectetur adipiscing elit. Sed ut urna nec purus lacinia tincidunt nec Andy Richter. Vivamus efficitur, risus at vehicula fermentum, eros magna Matt O'Brien, non tincidunt lacus magna at eros. Nulla facilisi. In hac habitasse platea dictumst.

Code

Inline code: const x = 42;

Code block with copy to clipboard:


---
import type { ShikiConfig } from "astro";
import type {
	BundledLanguage,
	LanguageRegistration,
	SpecialLanguage,
} from "shiki";

import { SITE } from "@config";
import { Code } from "astro:components";
import CopyToClipboard from "./utils/CopyToClipboard.astro";

interface CopyCodeProps {
	code?: string;
	lang: BundledLanguage | SpecialLanguage | LanguageRegistration;
	customIcon?: JSX.Element;
	theme?: ShikiConfig["theme"];
	customClass?: string | Array<{ [key: string]: boolean | string }>;
}

const {
	code = "",
	lang,
	customIcon,
	customClass,
	theme = SITE.shikiConfig.theme,
} = Astro.props as CopyCodeProps;
---

<div class:list={["relative py-1 px-4 m-0", customClass]}>
	<CopyToClipboard
		textToCopy={code}
		customIcon={customIcon}
		aria-label="Copy code to clipboard"
		size={10}
		customClass="absolute top-4 right-4"
	/>
	<Code lang={lang} theme={theme} code={code} />

</div>