Colours

Default

#222
rgb(34, 34, 34)
hsl(0, 0%, 13%)

Primary

#005b99
rgb(0, 91, 153)
hsl(204, 100%, 30%)

Secondary

#993d00
rgb(153, 61, 0)
hsl(24, 100%, 30%)

Information

#03607d
rgb(3, 96, 125)
hsl(194, 95%, 25%)

Success

#036803
rgb(3, 104, 3)
hsl(120, 94%, 21%)

Warning

#695802
rgb(105, 88, 2)
hsl(50, 96%, 21%)

Danger

#b60202
rgb(182, 2, 2)
hsl(0, 98%, 36%)

Dark mode

A dark mode is available by adding data-mode="dark" to the <html> tag or class="theme--dark" to the <body> tag.

Typography

Headings

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading

Heading 6 Sub-heading

Paragraphs

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus massa eu est ullamcorper, luctus pellentesque leo molestie. Etiam ipsum magna, egestas ac massa gravida, condimentum scelerisque leo.

You can add a <span class="lede"/> for emphasis of the first part of a paragraph.

Maecenas commodo malesuada eros vitae pellentesque. In suscipit finibus molestie. Sed in ultricies dolor. Vivamus quis varius nisl, at fringilla felis. Sed faucibus ullamcorper arcu in commodo. Cras euismod lacus id volutpat porta. Etiam vel posuere enim, eu accumsan sem. Mauris ante purus, mattis quis ante vel, iaculis mattis nulla. Donec finibus sem nec dictum vestibulum. Sed vitae augue quis ligula efficitur fermentum non eu nulla. Proin tincidunt ullamcorper blandit.

Pellentesque efficitur et orci nec lacinia. Integer congue justo in libero eleifend ullamcorper. Nullam rutrum, lorem eget efficitur placerat, turpis libero faucibus est, at aliquam arcu justo sit amet nibh. Sed mollis enim tristique tortor pulvinar bibendum. Nullam vel maximus dolor, at ornare velit. Nunc efficitur elit at felis pulvinar, vel fermentum justo gravida. Proin volutpat quam neque, in porta elit cursus at. Nam id velit semper, finibus sem id, fermentum sapien. Aliquam lobortis nisl a libero fringilla sollicitudin.

Links

Heading 2 link

Heading 3 link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nulla tempus massa eu est ullamcorper, luctus pellentesque leo molestie.

Etiam ipsum magna, egestas ac massa gravida, condimentum scelerisque leo.

Remove :hover, :active and :visited styles by adding the permanent class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text variants

Primary lorem ipsum dolor sit amet, consectetur adipiscing elit.

Secondary lorem ipsum dolor sit amet, consectetur adipiscing elit.

Information lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning lorem ipsum dolor sit amet, consectetur adipiscing elit.

Danger lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tables

Base

Table caption
Name	Department	Role	Status
Alice Smith	Engineering	Developer	Active
Bob Jones	Design	Designer	Active
Carol White	Marketing	Manager	On leave
David Brown	Finance	Analyst	Active
4 team members

Striped

Name	Department	Role	Status
Alice Smith	Engineering	Developer	Active
Bob Jones	Design	Designer	Active
Carol White	Marketing	Manager	On leave
David Brown	Finance	Analyst	Active

Bordered

Name	Department	Role	Status
Alice Smith	Engineering	Developer	Active
Bob Jones	Design	Designer	Active
Carol White	Marketing	Manager	On leave

Hover

Name	Department	Role	Status
Alice Smith	Engineering	Developer	Active
Bob Jones	Design	Designer	Active
Carol White	Marketing	Manager	On leave

Small

Name	Department	Role	Status
Alice Smith	Engineering	Developer	Active
Bob Jones	Design	Designer	Active
Carol White	Marketing	Manager	On leave

Responsive

Wrap in .table-responsive to enable horizontal scroll on narrow viewports.

Name	Email	Department	Role	Location	Start date	Status
Alice Smith	alice@example.com	Engineering	Developer	Toronto	2021-03-15	Active
Bob Jones	bob@example.com	Design	Designer	Vancouver	2019-11-01	Active
Carol White	carol@example.com	Marketing	Manager	Montreal	2018-06-20	On leave

Forms

Input large label

Some help text for this input.

Input label

Input label small

Select label

Checkbox group

Checkbox input

Radio group

Radio input

Input label

Inline

.form--inline class can be used to display form controls inline. On smaller screens, the controls will wrap to the next line.

Buttons

Button classes can be applied to <a>, <button> or <input type="button|submit|reset"> tags.

Link

Buttons also come in a -dark variant.

Buttons also come in three sizes: default, button--sm and button--lg.

Button groups

Wrap .button elements in a .button-group to connect them into a single control. Buttons share borders and the group has a continuous border-radius on its outer edges.

Mixed variants work too:

Radio button group

Place a .button-group__input input immediately before its label. The input is visually hidden; the checked state fills the label with the variant colour.

Left Centre Right

Checkbox button group

Same pattern with type="checkbox" for multi-select:

Bold Italic Underline

Alerts

Alerts come in a few flavours: default, information (info), success, warning and error. Links within the message will inherit the alert text colour, losing the hover, active and visited states.

Alerts with an alert__close button:

<button type="button" class="alert__close" aria-label="Close"><span class="fa-light fa-xl fa-xmark"></i></button>

will be hidden (display: none;) when closed. Alerts with the alert--removable class will be removed from the DOM when closed.

The alert--overlay class will overlay the alert at the top of its position: relative container.

The alert--sm class is intended to be used inside a component, and generally not at a page level.

Single line message

Single line informational message

Small single line informational message using alert--sm modifier

Single line success message that’s a little long

Small single line success message that’s a little long

Single line warning message

Multiple line error message that’s a little long

Multiple line error message

Item to correct
Item to correct
Item to correct

Lists

Lists are default-styled, with a little extra margin and line-spacing. The bullets are outside, allowing the text to align with other body text.

Classes can be applied at the ol and ul level to specify the type of number or bullet to be applied: list list--alpha (a, b, c), list list--roman (i, ii, iii), list list--circle, list list--disc, list list--square, list list--none.

Ordered lists

List 1

List item
multi-line
List item
1. Nested ordered item
2. Nested ordered item
3. Nested ordered item
List item

List 2

List item
List item
- Nested unordered item
- Nested unordered item
- Nested unordered item
List item

Unordered lists

List 1

List item
multi-line
List item
- Nested item
- Nested item
- Nested item
List item

List 2

List item
List item
1. Nested ordered item
2. Nested ordered item
3. Nested ordered item
List item

Plain lists

List

List item
List item
- Nested item
- Nested item
- Nested item
List item

Cards

Already used as an example for Colours, cards have a title and body.

Default

The default card style.

Primary

The primary colour card.

Secondary

The secondary colour card.

Information

The information colour card.

Success

The success colour card.

Warning

The warning colour card.

Danger

The danger colour card.

Dark variants

As with buttons, cards also come in a -dark variant.

Primary dark

The dark variant of the primary colour card.

Secondary

The dark variant of the secondary colour card.

Information

The dark variant of the information colour card.

Success

The dark variant of the success colour card.

Warning

The dark variant of the warning colour card.

Danger

The dark variant of the danger colour card.

Images

Only a few classes exist to display images, and they’re only to apply a little style around images:

img img--default: padded with rounded border
img--round: with img, circular
img--rounded: with img, rounded corners
img--padded: with img, padded, white background
img--border: with img, grey border

`img img--round`. A circle requires a square image.

Images from placebeard.it.

Badges

Variants

Default Primary Secondary Success Danger Warning Info Light Dark

Pill

Add .badge--pill for a rounded pill shape.

Default Primary Secondary Success Danger Warning Info Light Dark

In context

Badges scale to their parent element's font size and can be placed inline with text.

In headings New

Subheading Beta

Unread messages 4

Notifications 12 Alerts 3

Modals

Modals use the native <dialog> element with showModal(). Use data-modal-target on a trigger and a matching id on the dialog. A <form method="dialog"> inside the modal closes it natively via any submit button — no extra JavaScript needed.

Accordion / Disclosure

Built on the native <details> and <summary> elements — no JavaScript required for basic expand/collapse behaviour.

Standalone disclosure

What is Albert CSS?

Albert CSS is a personal CSS framework based on Bootstrap v4, built with vanilla JS and no framework dependencies.

How do I use it?

Include the compiled CSS and JS files in your HTML. Use the provided class names to style your components.

This one starts open

Add the open attribute to a <details> element to have it expanded on load.

Accordion

Wrap multiple items in .accordion to connect them visually. Each .accordion__item closes its siblings when opened.

Getting started

Download or link to the CSS and JS files. No build tools required for basic usage.

Customisation

Override CSS custom properties in your own stylesheet to change colours, spacing, and typography without touching the source.

Browser support

All modern browsers. The <details> element is supported in every evergreen browser and has been since 2020.

Accessibility

<details> and <summary> are natively keyboard accessible and exposed correctly to assistive technology — no ARIA attributes required.

Add custom details marker icons by including an element with the disclosure__icon or accordion__icon class inside the summary element.

Tabs

Use role="tablist", role="tab", and role="tabpanel" with matching aria-controls / id pairs. The active tab is indicated by aria-selected="true"; inactive panels use the hidden attribute. Arrow keys, Home, and End navigate between tabs.

Tabs organize content into separate views where only one is visible at a time. Use them when content can be meaningfully grouped into distinct, parallel sections.

Add aria-selected="true" and tabindex="0" to the initially active tab. All other tabs get aria-selected="false" and tabindex="-1". Match each tab's aria-controls to its panel's id.

Dropdowns

A .dropdown__trigger button toggles a .dropdown__menu. Arrow keys navigate items; Escape closes the menu and returns focus to the trigger.

Basic dropdown

Right-aligned dropdown

Add .dropdown--right to align the menu to the right edge of the trigger.

Add custom dropdown arrow icons by including an element with the dropdown__icon class inside the button element.

Tooltips and Popovers

Tooltips

Add the .tooltip class and a data-tooltip attribute directly to any interactive element. No JavaScript required. The tooltip appears on hover and keyboard focus.

Placement defaults to top. Use .tooltip--bottom, .tooltip--left, or .tooltip--right to change direction.

Placements

On inline text

Wrap an inline element to add a tooltip to a word or phrase. HTML is a good candidate.

Popovers

A .popover wrapper contains a .popover__trigger button and a .popover__panel. Clicking the trigger toggles the panel; Escape closes it and returns focus to the trigger.

Placement is set via a modifier on the panel: .popover__panel--top, .popover__panel--left, or .popover__panel--right. Default placement is bottom.

Placements

Utilities

Some utility classes are available to handle specific needs, not handled by other components.

Spacing

Pattern: .{m|p}{axis}{n} — margin or padding, axis, and a numeric scale where each step is 0.25rem (0–8, reaching 2rem). Uses CSS logical properties, so axes respect writing direction.

Axis	Margin	Padding	Property
(none)	`m-{n}`	`p-{n}`	all sides
`t`	`mt-{n}`	`pt-{n}`	`block-start` (top in LTR)
`b`	`mb-{n}`	`pb-{n}`	`block-end` (bottom in LTR)
`s`	`ms-{n}`	`ps-{n}`	`inline-start` (left in LTR)
`e`	`me-{n}`	`pe-{n}`	`inline-end` (right in LTR)
`x`	`mx-{n}`	`px-{n}`	`inline` (left + right in LTR)
`y`	`my-{n}`	`py-{n}`	`block` (top + bottom in LTR)

Scale: 0=0 1=0.25rem 2=0.5rem 3=0.75rem 4=1rem 5=1.25rem 6=1.5rem 7=1.75rem 8=2rem

Auto margin utilities: mx-auto, my-auto, ms-auto, me-auto, mt-auto, mb-auto.

For example:

2rem top margin: mt-8
1.5rem inline-end (right) padding: pe-6
1rem horizontal margins: mx-4
0.5rem vertical padding: py-2
0.25rem inline-start (left) padding: ps-1
No padding: p-0

Legacy utilities

These utilities are deprecated and will be removed in a future version.

The original spacing classes remain available. Pattern: .{m|p}-{side}-{size}. Sides: t (top), b (bottom), l (left), r (right), h (left + right), v (top + bottom). Sizes: xs (0.25rem), sm (0.5rem), md (1rem), lg (1.5rem), xl (2rem).

2rem top margin: m-t-xl
1.5rem right padding: p-r-lg
1rem horizontal margins: m-h-md
0.5rem vertical padding: p-v-sm
No padding: p-0

Text

Text utilities can be used on both block-level and inline elements.

Text colour utilities match the alerts, buttons and cards colours:

Primary colour text using class="text-primary".

Secondary colour text using class="text-secondary".

Information colour text using class="text-info".

Success colour text using class="text-success".

Warning colour text using class="text-warning".

Danger colour text using class="text-danger".

Muted colour text using class="text-muted".

Background colour

Use text-bg-* to set both background and a theme-aware contrasting text colour in one class:

text-bg-primary

text-bg-secondary

text-bg-info

text-bg-success

text-bg-warning

text-bg-danger

Use bg-* alone when you only need the background:

bg-primary

bg-secondary

bg-info

bg-success

bg-warning

bg-danger

bg-muted

bg-dark

bg-white

bg-transparent

Text alignment

text-start, text-center, and text-end use CSS logical values and respect writing direction.

Left-aligned text (text-start).

Centred text (text-center).

Right-aligned text (text-end).

Other text utilities

“Normal” weight `h4` heading with `class="fw-normal"`. It can be used to reset font weight in headings or bold text.

Bold text using class="fw-bold". It’s not quite as bold as <strong> .
Strong text, for reference.

Light text using class="fw-light".

Uppercase text using class="text-uppercase". For example, use it with text-sm and fw-light for fun variations.

Display

Display values

Set the display property directly with a utility class.

Class	Property
`d-none`	`display: none`
`d-block`	`display: block`
`d-inline`	`display: inline`
`d-inline-block`	`display: inline-block`
`d-flex`	`display: flex`
`d-inline-flex`	`display: inline-flex`
`d-grid`	`display: grid`

Flex helpers

Use alongside d-flex or d-inline-flex to control direction, wrapping, alignment, and justification.

Class	Property
`flex-row`	`flex-direction: row`
`flex-column`	`flex-direction: column`
`flex-wrap`	`flex-wrap: wrap`
`flex-nowrap`	`flex-wrap: nowrap`
`align-items-start`	`align-items: flex-start`
`align-items-end`	`align-items: flex-end`
`align-items-center`	`align-items: center`
`align-items-stretch`	`align-items: stretch`
`align-items-baseline`	`align-items: baseline`
`justify-content-start`	`justify-content: flex-start`
`justify-content-end`	`justify-content: flex-end`
`justify-content-center`	`justify-content: center`
`justify-content-between`	`justify-content: space-between`
`justify-content-around`	`justify-content: space-around`
`justify-content-evenly`	`justify-content: space-evenly`

Gap

Set gap, column-gap, or row-gap on flex and grid containers. Same 0–8 scale as spacing (n × 0.25rem).

gap-{n} — both axes
gap-x-{n} — columns only
gap-y-{n} — rows only

Overflow

Class	Property
`overflow-auto`	`overflow: auto`
`overflow-hidden`	`overflow: hidden`
`overflow-visible`	`overflow: visible`
`overflow-scroll`	`overflow: scroll`
`overflow-clip`	`overflow: clip`
`overflow-x-auto`	`overflow-x: auto`
`overflow-x-hidden`	`overflow-x: hidden`
`overflow-x-scroll`	`overflow-x: scroll`
`overflow-y-auto`	`overflow-y: auto`
`overflow-y-hidden`	`overflow-y: hidden`
`overflow-y-scroll`	`overflow-y: scroll`

Position

Class	Property
`position-static`	`position: static`
`position-relative`	`position: relative`
`position-absolute`	`position: absolute`
`position-fixed`	`position: fixed`
`position-sticky`	`position: sticky`

Sticky helpers

sticky-top and sticky-bottom apply position: sticky with a fixed edge and a default z-index of 100.

Edge placement

Use with position-absolute or position-fixed to anchor an element to an edge of its container. Values: 0, 50%, 100%.

top-{0|50|100}
bottom-{0|50|100}
start-{0|50|100} — inset-inline-start
end-{0|50|100} — inset-inline-end

Add translate-middle alongside top-50 start-50 to centre an absolutely-positioned element within its parent.

top / start top / end centre bottom / start bottom / end

Shadows

Box-shadow utility scale — values use px as is standard for decorative effects.

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-inner

shadow-none

Borders

Adding borders

border adds a 1px border on all sides using var(--grey300). Individual sides use logical properties.

border

border-top

border-bottom

border-start

border-end

Border colours

primary

secondary

success

info

warning

danger

Border width

border-1

border-2

border-3

border-4

Border radius

rounded-0

rounded-sm

rounded

rounded-lg

rounded-xl

rounded-xxl

rounded-pill

rounded-full

Z-index

Numeric scale

General-purpose scale for stacking elements within a component. Use with position-relative or position-absolute.

Class	Value
`z-0`	`0`
`z-10`	`10`
`z-20`	`20`
`z-30`	`30`
`z-40`	`40`
`z-50`	`50`
`z-auto`	`auto`

Semantic scale

Named values that match the layering used by framework components.

Class	Value	Used by
`z-above`	`10`	Above normal flow
`z-raised`	`100`	Raised elements
`z-dropdown`	`1000`	Dropdown
`z-sticky`	`1020`	`sticky-top`, `sticky-bottom`
`z-fixed`	`1030`	Fixed headers/footers
`z-backdrop`	`1040`	Modal backdrop
`z-modal`	`1050`	Modal
`z-popover`	`1060`	Popover
`z-tooltip`	`1070`	Tooltip

Aspect ratio

Apply ratio to a wrapper element, then add a modifier for the desired ratio. The direct child (iframe, img, video, etc.) is stretched to fill the container via absolute positioning.

<div class="ratio ratio--16x9">
  <iframe src="..." title="..."></iframe>
</div>

Class	Ratio	Common use
`ratio--1x1`	1:1	Square thumbnails, avatars
`ratio--4x3`	4:3	Standard SD video
`ratio--3x2`	3:2	Photography
`ratio--16x9`	16:9	HD video, embeds
`ratio--21x9`	21:9	Cinematic / wide banners
`ratio--9x16`	9:16	Vertical / portrait video

Examples

1×1

ratio--1x1

4×3

ratio--4x3

16×9

ratio--16x9

21×9

ratio--21x9

Grid

grid sets a 12-column CSS grid. Use grid-cols-{n} for equal-width columns, or col-{n} to span a specific number of columns. Combine with gap-* for gutters.

Equal-width columns

grid grid-cols-{n} — each child fills one column:

col

Column spans

Use col-{n} on children of a grid container to span a specific number of the 12 columns:

col-12

col-6

col-8

col-4

col-3

Row and full-width helpers

col-full — spans all 12 columns (1 / -1)
col-auto — auto-sized column
row-span-{1–6} — span multiple rows
row-span-full — span all rows

Cell alignment

place-items-{center|start|end|stretch} — align all cells within the grid
place-self-{center|start|end|stretch} — align a single cell within its area