visual-aside, visual-indicator and btn--icon classes are all icon wrappers, try not to group them together on the same tag or nest one as a sub-element.
You can mix and match visual-aside and visual-indicator as different component within the same parent component, but btn--icon is meant to be used on its own
Use btn--icon for action buttons that are icon-only. visual-aside is for adding extra visual cues, like an "i" or a megaphone icon in alerts—while visual-indicator helps highlight specific states, like showing a checkmark when a [switchable] component is selected.
<span>Base state <span class="visual-indicator" be-icon="external-link"/></span>
<span class="txt-low-50" href="#asd">low</span>
<span class="txt-normal-50" href="#asd">
normal
</span>
<a class="txt-info-50" href="#asd">
info<span class="visual-indicator" be-icon="external-link"/>
</a>
<button class="txt-critical-50">
critical
</button>
<button class="txt-caution-50">
caution
</button>
<button class="txt-white bg-low-60">
Text White with low background-color
</button>
popper
BAKUNG CSS
Build on desktop, aim for mobile.
From Author
When design and writing Bakung CSS, I focused on a few core principles and goals:
Lightweight & Pure CSS: Keeping file sizes small and ensuring component interactions work out of the box without any JavaScript dependencies.
Simple class names:<buton class="btn primary bordered"></button>
Composable Components: Components are designed to be mixed and matched to build entirely new elements or variations.
Responsive by Default: Component interactions adapt smoothly to any screen width.
Zero-Config Customization: Easy to tweak without needing to know SASS/SCSS or even touch the original CSS file.
Of course, a few things were overlooked and not every single goal was hit. But looking at what Bakung CSS can do right now, the first thing that comes to mind is: "It doesn't disappoint.".
We’ll be adding new features and trimming the fat as we go, but our main focus right now is simply keeping Bakung CSS moving forward.
Getting Started
Bakung CSS is a library that provides UI components and essential utility classes. It’s pure CSS with zero JavaScript, a choice built on the idea that modern HTML and CSS already offer everything you need for a great user experience.
To get Bakung CSS looking its best, you'll need to include Google Fonts and @bakung-ui/minimax.css, which serves as the foundation for the framework. Check out our recommended HTML template to see how to set it up.
View the starter template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="view port" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&family=Montserrat:wght@100..900&family=Sometype+Mono:wght@400..700&display=swap" rel="stylesheet">
<!--
You don't need @bakung-ui/minimax.css because it’s already included in @bakung-ui/bakung.css.
The only exception is if you’re in development and still using @bakung-ui/css/_variables.css
and @bakung-ui/css/_bakung.css separately.
-->
<link rel="stylesheet" href="./minimax.css" />
<link rel="stylesheet" href="./bakung.css" />
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Bakung CSS is ready for production, but if you want a unique look, at least tweak the colors, especially the semantic ones. You can pretty much ignore the rest, like fonts, shapes, sizes, and spacing.
Bakung CSS uses the BEM (Block, Element, Modifier) naming convention. Don't worry if you’re new to BEM, you don't need to master it to start using the library. It’s pretty easy to pick up, but if you want to dive deeper, you can check it out here: getbem.com .
Everything is sized with REM and EM. You’ll see REM used most often for fonts, components, and icons. This keeps the whole interface flexible and helps it adapt better to different settings.
640px is the extra small size, with the shorthand xs.
Most CSS frameworks follow a "starting from" rule. For example, col-12 col-sm-5 usually means an element starts at 12 columns, but jumps to 5 columns once the screen hits 768px or wider. Bakung CSS works differently. It uses a "scaling down" approach where a rule applies until it hits a specific limit. In this case, col-12 col-sm-5 sets the element to 5 columns on screens up to 768px, once you go past that, it scales up to 12 columns.
Not all components support every breakpoint. Instead, they are applied based on need, either relative to the container width or the entire viewport.
For viewport-based modifiers, we use the prefix v, for example, navbar with navbar--vsm-compact. If the change is based on the container’s width instead, we drop the v (e.g., navbar--sm-compact). We distinguish between these two approaches to optimize how users interact with each component. Every element has its own unique function and look, and the device being used matters just as much. While a desktop user has a mouse, a tablet user (768px and up) might use a stylus, whereas mobile users (under 768px) rely solely on touch. All of these factors change how someone interacts with a component.
The navbar component usually stretches full-width, using mouse hover interactions to reveal nested sub-elements. While you could trigger its responsive changes based on the container size, that doesn't always make sense, for instance, a 1280px viewport might contain a small 640px element. Using container based triggers here would hold the navbar back from its full potential. Instead, it’s better to link its behavior to the viewport. That’s why we use navbar--vsm-compact: once the screen drops below 768px, the navbar switches to a vertical, compact layout.
For the accordion component, we use the accordion--sm-vertical modifier. Since screen size or input devices don't really change how a user interacts with an accordion, tying its responsive behavior to the container size is the way to go.
Colors
Bakung CSS comes with a set of colors you can apply to any element or component—specifically, colors designed for specific states or priorities.
Avoid combining btn--ghost with color theme classes, as it won't have any effect.
Feel free to add visual-aside or visual-indicator sub-elements for extra visual cues. For example, if you add an element with the [be-icon="loading"] attribute, the cursor will automatically switch to a loading state when hovered.
Support Classes and Attributes
Changing the appearance:
--btn-size defaults to 1. Switch this up to get a different size, or you can achieve the same thing by changing the font-size.
[disabled] to show that an element can't be used.
Changing the color theme:
btn--accent
btn--low
btn--normal
btn--important
btn--critical
btn--info
btn--success
btn--caution
btn--warning
btn--error
btn--danger
Specific behaviors:
btn--icon strips away the usual button look—perfect for when you only want to show an icon.
btn--ghost a borderless button with a transparent gray background.
btn--bordered combine with any color theme to customize its appearance.
The badge component is designed to be static, it doesn't trigger actions or react to user input. The only exception is when you use it to display a link.
Feel free to add sub-elements with the visual-aside or visual-indicator classes. Using them with icons is a great way to make your information stand out more.
Support Classes and Attributes
Changing the appearance:
--badge-size defaults to 1. Switch this up to change the scale, or you can achieve the same result by overriding the font-size
Changing the color theme:
badge--accent
badge--low
badge--normal
badge--important
badge--critical
badge--success
badge--info
badge--caution
badge--warning
badge--error
badge--danger
Chip(Pill & Tag)
Base statImportant Icon elementGo to site
With action button
badge--chip is an interactive version of the standard badge, built to handle user actions and provide feedback.
You can reuse any badge modifier classes here as well. If you’re adding an action, we recommend using a btn btn--icon sub-element to keep things consistent.
[be-removeable] does one thing, it deselects the item and removes it from the view
You can combine [be-removeable] with the badge class and its helper classes. It’s also a good idea to group your controls within a <fieldset> container.
The [be-switchable] component is a great alternative to standard <input [type="checkbox"]> and <input [type="radio"]>. If you're just checking or unchecking something, go with a checkbox. If you need to choose one out of several options, use a radio button instead.
Better to avoid combining badge color variations here. Instead, you should add a sub-element with the visual-indicator class to show that an item has been selected.
Support Classes and Attributes
Specific behaviors:
active-invisible hides the sub-element whenever it's in an active state.
active-visible to show sub-elements only when they're toggled to active.
Toggle
Flight mode
|
FalseTrue
|
Dominant hand:
Left
Right
The toggle component is a great alternative to standard <input [type="checkbox"]> and <input [type="radio"]>.
If you need to switch between two distinct values (off vs. on), stick with the <input [type="radio"]> element. If you want specific elements to appear or disappear based on that state, just drop a sub-element into the toggle component and give it the active-invisible or active-visible class.
Support Classes and Attributes
Changing the appearance:
--toggle-size defaults to 1. Switch this up to change the scale, or you can achieve the same result by overriding the font-size
Specific behaviors:
toggle--vertical switches the layout to vertical.
toggle--mutual for equal-value choices (typically with <input [type="radio"]>) to bypass the standard on-off visual style.
Divider
Divider
Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
View code
<div class="group">
<p>
Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.
</p>
<hr class="divider divider--vertical" be-divider-caption="or" />
<p>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</p>
</div>
Use the divider component to draw a line between two parts of your layout
Support Classes and Attributes
Changing the appearance:
[be-divider-caption] sets the text that appears centered within the divider.
Specific behaviors:
divider--vertical creates a vertical line. Just make sure the parent container is set to a row layout (display: flex;), or simply add the group helper class.
Tooltip
Tooltip
View code
<button be-tooltip="Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.">Dekati aku!</button>
View code
<button class="tooltip--right tooltip--no-pointer tooltip--focus" be-tooltip="Say something!">Set me :focus</button>
Support Classes and Attributes
Changing the appearance:
[be-tooltip] holds the text that will be displayed inside the element's tooltip.
tooltip--active to keep the tooltip visible at all times.
Switch the display position:
tooltip--right
tooltip--bottom
tooltip--left
Specific behaviors:
tooltip--no-pointer if you want to hide the little arrow pointer.
tooltip--focus to show the tooltip when the element is focused (:focus).
Popper
Popper
Hi im the popper element!, and support html element.
View code
<div class="position-relative">
<input type="text" value="I am an input text, please hover over me! " size="22"/>
<div class="popper popper--hover">
<div class="popper__content">
Hi im the popper element!, and support html element. <br/>
<button>I'm button</button>
</div>
</div>
</div>
You can pair the popper component with pretty much any interactive element. It handles everything from plain text to complex HTML and other components. To get it working right, you’ll need two things: a parent container set to position: relative; (add an display: inline*; usually helps), and a trigger element to activate the popper, usually a button.
Sometimes you might want to wrap the popper component (and its container) inside a parent that uses display: *flex;. To keep everything working correctly, just make sure the popper's immediate parent is set to display: inline-flex;, or simply use the popper-container class we've already set up for you.
If you need a complex pop-up menu, you can use the navbar navbar navbar--*compact component. Just avoid navbar navbar--vertical, as it doesn't play well with overflow:scroll and won't allow sub-elements to "float" outside the parent container's boundaries.
If you're writing custom JavaScript and want the popper to stay open even after it loses focus, just add the [data-popper-active] attribute to the component. To close it again, simply remove the attribute.
Support Classes and Attributes
Class to trigger the view:
popper--hover triggers the popper when hovered.
popper--focus activates on :focus (via click or keyboard focus).
[data-popper-active] manually shows the popper without needing a hover or click. Typically triggered via .
Switch the display position:
popper--tl pops up at the top-left.
popper--tr pops up at the top-right.
popper--bl pops up at the bottom-left.
popper--bm pops up at the bottom-center.
popper--br pops up at the bottom-right.
popper--lt pops up at the left-top.
popper--lm pops up at the left-center.
popper--lb pops up at the left-bottom.
popper--rt pops up at the right-top.
popper--rm pops up at the right-center.
popper--rb pops up at the right-bottom.
Specific behaviors:
popper--pointer gives you the pointy corner that points right at whatever activated it.
popper--list creates a vertical column view. Note: Sub-elements must be placed inside a popper__content wrapper instead of directly under the popper component.
popper-container add this to the parent when your popper is inside a flex container to make sure it behaves correctly.
popper__item use this to popper sub-elements, to standardize their appearance if popper has popper--list class.
popper__line adds a divider between items when used inside a popper--list.
Changing the appearance:
--popper-space defaults to 1. Just change this value if you want to adjust the spacing between the popper and whatever element activates it.
Add navbar--vertical to the navbar class for a vertical layout.
If you want to use custom icons as indicators, add navbar--no-indicator, then, create an element with the visual-indicator class and place it inside nav__item, or nav__item > *.
If you don't need to show all the menus at once, just add the navbar--compact class. If you only want this compact look on smaller screens, use navbar--vsm-compact instead, this will keep things tucked away as long as the screen width is under 768px. For example:
Backdrop elements are exclusive to dialog components in modal mode. If you're looking for a "no-JS" way to handle this, try adding the [popover] attribute.
Use the notice component for messages that stay fixed in place within your layout.
Even though you can add action buttons to a notice, like an "X" button ( ) to dismiss it, it’s generally best to avoid doing so.
Support Classes and Attributes
Changing the color theme:
notice--accent
notice--low
notice--normal
notice--important
notice--critical
notice--success
notice--info
notice--caution
notice--warning
notice--error
notice--danger
Notice-Notify
Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic. Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.
Suis praecipites, imagine quae erat: sanctius iuga ventos.
Add the notice--notify class to create a floating notification. To show the message, you'll need a bit of <javascript> to toggle the [data-notify-open] attribute
Container
Container
container-xs a container with a 640px width limit.
container-sm a container with a 768px width limit.
container-md a container with a 1280px width limit.
container-lg a container with a 1600px width limit.
container if you want a full width layout,it just adds padding to the left and right.
View code
<div class="container-xs bg-info-5">
<code>container-xs</code> a container with a 640px width limit.
</div>
<div class="container-sm bg-important-5">
<code>container-sm</code> a container with a 768px width limit.
</div>
<div class="container-md bg-normal-5">
<code>container-md</code> a container with a 1280px width limit.
</div>
<div class="container-lg bg-success-5">
<code>container-lg</code> a container with a 1600px width limit.
</div>
<div class="container bg-low-5">
<code>container</code> if you want a full width layout,it just adds padding to the left and right.
</div>
container component is a wrapper that limits the width of your content.
Our grid system uses a 12-column grid. You can set widths using col-{size}, for example col-1 ... col-12, to make things responsive, use col-{breakpoint}-{size} with our standard breakpoints: xs, sm, md, lg, or xl. For example: col-xs-4 or col-md-12.
In the example col-xs-12 col-sm-6 col-md-3 col-3, the element takes up the full width (col-xs-12) if the row is under 640px. Once the screen hits 640px to 768px, it switches to half-width (col-sm-6). The same logic applies as the container gets even wider.
Add the d-inline-flex class to make the container only as wide as its children, without losing any flex functionality.
View code
<div class="group-vertical group--border d-inline-flex shadow">
<button class="btn btn--normal group__action">I am a button</button>
<button class="btn btn--important group__action">I am too</button>
<button class="btn btn--critical group__action">I am three</button>
</div>
Use gap-{value} to add spacing between items. For child elements, you can apply border-radius-{value}, just remember to add group--border-radius to the container so the children correctly inherit the parent's shape.
If you're using a popper as a sub-element, make sure to add the group__action class to the trigger element itself, rather than the popper-container.
Support Classes and Attributes
Changing the appearance:
group arranges items in a horizontal layout.
group-vertical stacks items vertically.
group--border adds divider lines between each item.
group--border-radius ensures the first and last items match the container's corner radius.
Specific behaviors:
group__label Apply this to child elements used as labels to keep their styling consistent.
group__input Apply this to input elements to ensure they look uniform within the group.
group__action Apply this to action buttons to standardize their appearance.
Form
Form Control
View code
<fieldset class="form__group">
<label for="controlEmailAddress1" class="form__label">Email address</label>
<span class="form__description">
Use at least 8 characters, including at least one uppercase letter and one special character (~!@#$%^&*()_+=:|/?).
</span>
<input class="form__control" type="email" id="controlEmailAddress1">
</fieldset>
<fieldset class="form__group">
<label for="controlTextArea1" class="form__label">Text Area</label>
<div class="form__control">
<textarea id="controlTextArea1" rows="3"></textarea>
</div>
</fieldset>
<fieldset class="form__group">
<label for="group-2-1" class="form__label">Group Inputs</label>
<div class="form__control group">
<input id="group-2-1" class="group__input" type="text">
<input id="group-2-2" class="group__input" type="text">
<button class="btn btn--low group__action">Choose</button>
</div>
</fieldset>
<fieldset class="form__group">
<label for="example-input-file" class="form__label">Upload</label>
<div class="form__control group">
<input type="file" id="example-input-file" class="group__input">
</div>
</fieldset>
<fieldset class="form__group">
<label for="checkbox1" class="form__label">Group Inputs</label>
<div class="form__control group align-items-center">
<!-- no class -->
<input type="checkbox" id="checkbox1" class="">
<input type="range" id="example-input-range" min="1" max="4" value="3" class="group__input">
<select id="example-optgroup" class="group__input">
<optgroup label="Swedish Cars">
<option>Volvo</option>
<option>Saab</option>
</optgroup>
<optgroup label="German Cars">
<option>Mercedes</option>
<option>Audi</option>
</optgroup>
</select>
</div>
</fieldset>
We recommend putting your input inside a form__control wrapper, even if it's the only element in there.
Support Classes and Attributes
Specific behaviors:
form__group add this to your wrapper to keep your form sections organized and well-spaced
form__label use this for your input labels (usually the <label> element) to identify the field.
form__control use this class for any element that handles user input.
form__description similar to a form__label, but used for providing extra hints or detailed instructions about the input.
Layout
View code
<fieldset class="form__group row">
<div class="col">
<div class="form__control">
<input type="text" placeholder="First name" aria-label="First name">
</div>
</div>
<div class="col">
<div class="form__control">
<input type="text" placeholder="Last name" aria-label="Last name">
</div>
</div>
</fieldset>
<fieldset class="form__group row">
<div class="col-2 col-md-3">
<label for="name" class="form__label">Name</label>
</div>
<div class="col-10 col-md-9">
<div class="form__control">
<input id="name" type="text" placeholder="Name">
</div>
</div>
</fieldset>
<fieldset class="form__group row">
<label for="controlEmailAddress2" class="form__label col-2 col-sm-12">Email</label>
<div class="col-10 col-sm-12">
<div class="form__control">
<input type="email" id="controlEmailAddress2" placeholder="Email">
</div>
</div>
</fieldset>
<fieldset class="form__group row">
<label for="controlPassword2" class="form__label col-2 col-sm-12">Password</label>
<div class="col-10 col-sm-12">
<span class="form__description">
Use at least 8 characters, including at least one uppercase letter and one special character (~!@#$%^&*()_+=:|/?).
</span>
<div class="form__control">
<input type="password" id="controlPassword2" placeholder="Password">
</div>
</div>
</fieldset>
To create a specific layout, you can combine row and col* classes directly with form__label and form__control, or simply wrap them in their own container first.
When grouping a <label>, <input>, and <button> together, it's best to wrap them in a <fieldset>.
Make sure to add the [novalidate] attribute to your <form> to disable the browser's default validation. To show validation results, use a new element with either the valid-feedback or invalid-feedback class. Note that these effects only show up if the form has the [data-was-validated] attribute, which is usually added after checking data against the server or processing it via JavaScript.
If you want to show validation results for a specific form__group, just add the [data-is-valid] or [data-is-invalid] attribute to the form__control.
View code
<form novalidate>
<fieldset class="form__group row">
<label for="username-1" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User name</label>
<div class="col-9 col-sm-12">
<div class="form__control group data-is-invalid">
<span class="group__label">@</span>
<input id="username-1" class="group__input" value="handsomeman" placeholder="Username for your account">
</div>
<div class="valid-feedback">
Looks good.
</div>
<div class="feedback">
You're not handsome, dont use"handsomeman".
</div>
</div>
</fieldset>
</form>
Unlike invalid-feedback or valid-feedback, which only handle one specific state, the feedback class is independent. Feel free to mix and match these if you want to display a combination of success and failure messages.
Depending on your setup, you can rewrite the [data-is-valid] and [data-is-invalid] attributes as classes, which is how we have it set up right now.
Use form__control--validation-icon if you only want to show the validation icon. If you’d rather just change the border color, use form__control--validation-border instead.
View code
<form novalidate>
<fieldset class="form__group row">
<label for="username-2" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User name</label>
<div class="col-9 col-sm-12">
<div class="form__control group data-is-invalid form__control--validation-icon">
<span class="group__label">@</span>
<input id="username-2" class="group__input" value="handsomeman" placeholder="Username for your account">
</div>
<div class="invalid-feedback">
You're not handsome, dont use"handsomeman".
</div>
</div>
</fieldset>
<fieldset class="form__group row">
<label for="username-3" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User name</label>
<div class="col-9 col-sm-12">
<div class="form__control group data-is-invalid form__control--validation-border">
<span class="group__label">@</span>
<input id="username-3" class="group__input" value="handsomeman" placeholder="Username for your account">
</div>
<div class="invalid-feedback">
You're not handsome, dont use"handsomeman".
</div>
</div>
</fieldset>
</form>
To let the browser handle validation automatically using your predefined rules, make sure the [novalidate] attribute is not present on the <form> element.
View code
<form>
<fieldset class="form__group row">
<label for="email-2" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Email (required)</label>
<div class="col-9 col-sm-12">
<input id="email-2" class="form__control" type="email" placeholder="Fill your email here" required>
<div class="feedback">
feedback: You see this in any feedback condition.
<!-- You shall not see any colored text or border -->
</div>
<div class="valid-feedback">
valid-feedback: Yes.
</div>
<div class="invalid-feedback">
invalid-feedback: Yes.
</div>
</div>
</fieldset>
<fieldset class="form__group row">
<label for="email-3" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Email (not required)</label>
<div class="col-9 col-sm-12">
<div class="form__control group">
<label class="group__label">@</label>
<input id="email-3" class="group__input" type="email" placeholder="Fill your email here">
</div>
<div class="feedback">
feedback: You see this in any feedback condition.
<!-- You shall not see any colored text or border -->
</div>
<div class="valid-feedback">
valid-feedback: Yes.
</div>
<div class="invalid-feedback">
invalid-feedback: Yes.
</div>
</div>
</fieldset>
<fieldset class="form__group row">
<label for="email-4" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Email (required)</label>
<div class="col-9 col-sm-12">
<div class="form__description">You wont see any feedback, because attribute [novalidate]</div>
<div class="form__control" novalidate>
<input id="email-4" type="email" placeholder="Fill your email here" required>
</div>
<div class="feedback">
feedback: You see this in any feedback condition.
<!-- You shall not see any colored text or border -->
</div>
<div class="valid-feedback">
valid-feedback: Yes.
</div>
<div class="invalid-feedback">
invalid-feedback: Yes.
</div>
</div>
</fieldset>
</form>
To prevent the browser from validating an input when it's actually empty, ensure you've included a placeholder. Even a simple one like <input type="text" placeholder="Write something in here"/> will do the trick.
Support Classes and Attributes
Specific behaviors:
[novalidate] attribute on your <form> to disable native browser validation. If you want to hide the validation status for a specific field, just add it to the form__control instead.
valid-feedback use this wrapper for elements that show a success message when everything looks good with the user's input.
invalid-feedback use this wrapper for elements that show an error message when something goes wrong with the user's input.
[data-was-validated] attribute on the <form> element once your validation logic (JS or server-side) is done. This class is what controls the visibility of your valid-feedback and invalid-feedback.
[data-is-valid] or the data-is-valid class: Apply this to a form__control to show that the user's input is valid and error-free.
[data-is-invalid] or the data-is-invalid class: Apply this to a form__control to show that the user's input failed validation due to an error.
feedback is for elements that show validation results for a specific form__control, triggered by either the [data-is-valid] or [data-is-invalid] attribute.
1 Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.
2 Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.
5 Suis praecipites.
View code
<div class="floater floater-bottom-right">
<div class="panel">
<div class="panel__header">
<!-- You can put tittle and clear and close button here -->
</div>
<div class="panel__body">
<!-- Put notice* in here -->
</div>
</div>
</div>
The floater component lets you float containers like <div> and <section>. This is useful for things like notice* components, when you have multiple items floating in one area, use a container to manage them.
Unlike the previous examples where elements float immediately, sometimes you want an element to start as static (inline with other content) and then pop up in the center of the screen. To do this, just add the popover attribute.
When using the popover attribute, try to avoid applying it to elements that are only shown once and then removed from the DOM. Whether it's floating or hidden, it’s best used on elements that stick around.
Support Classes and Attributes
Changing the appearance:
floater--md sets the floating element to a medium size.
floater--lg sets the floating element to a large size.
floater--fluid this makes the floating element's size adjust to fit its content, while ensuring it never gets larger than the screen itself.
Switch the display position:
floater-top
floater-top-left
floater-top-right
floater-bottom
floater-bottom-left
floater-bottom-right
Specific behaviors:
active-invisible this toggles sub-element visibility based on the float state. It keeps them visible when the floater is static, but hides them as soon as it starts floating.
active-visible to keep sub-elements hidden by default, making them pop into view only when the component switches to its floating state.
Cards
Card
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
View code
<article class="card">
<section class="card__media">
<img src="./assets/imagination.jpg" />
</section>
<header class="card__header">
<h3>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h3>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
Unlike a panel, which groups different types of data together, a card is meant for showing just a single piece of content.
The card component runs on a CSS grid, defaulting to 3 rows and 1 column. If you have fewer than 3 sub-elements, use helper classes like grid-row-span-2 to fill the gap—for example, making the card__body stretch across two rows.
Some teks for title inside card__body
Some teks for sub title
Teks hourglass gibbersih
View code
<article class="card">
<section class="card__body grid-row-span-2">
<h3>
Some teks for title inside card__body
<p class="subheader">
Some teks for sub title
</p>
</h3>
<p>
<!-- some teks -->
Teks hourglass gibbersih
</p>
<footer class="card__footer">
<a href="#asd" >Go To <i class="visual-indicator"></i></a>
</footer>
</section>
</article>
Cards
The card component really shines when you wrap multiple cards in a cards parent container. This ensures that all sub-elements, layouts, and sizes stay perfectly aligned and consistent with one another.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title for second card
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
View code
<div class="cards cards--media-sticks-to-border">
<article class="card">
<section class="card__media">
<img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
</section>
<header class="card__header">
<h4>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
</section>
<header class="card__header">
<h4>
Some teks for title for second card
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
</section>
<header class="card__header">
<h4>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
</div>
Use the cards--cover class if you want your medias to span across the whole card.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title for second card
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
View code
<div class="cards cards--cover">
<article class="card">
<div class="card__content">
<section class="card__media">
<img src="./assets/imagination.jpg" />
</section>
<header class="card__header">
<h4>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</div>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
</section>
<header class="card__header">
<h4>
Some teks for title for second card
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
</section>
<header class="card__header">
<h4>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
</div>
To switch to a horizontal layout, just add the cards--horizontal class.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title for middle card
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
View code
<div class="cards cards--horizontal cards--media-sticks-to-border">
<article class="card">
<section class="card__media">
<img src="./assets/aByRQg2_700b.jpg" />
</section>
<header class="card__header">
<h4>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<header class="card__header">
<h4>
Some teks for title for middle card
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
<section class="card__media">
<img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
</section>
<header class="card__header">
<h4>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h4>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
</div>
Cards Scrollable
To display cards in a scrollable row, just add the cards--scrollable class. Keep in mind that the card__media height can affect the height of the entire component. You can tweak this by setting a specific height (or max-height) on the card’s grid row or directly on the media element itself.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Has card__content as 1st elemen and act as container
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Has card__content as 2nd element and act as container
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title for second card
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title for second card
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
View code
<div class="cards cards--horizontal cards--media-sticks-to-border cards--scrollable cards--horizontal-nav">
<article class="card">
<section class="card__media">
<img src="./assets/aByRQg2_700b.jpg" />
</section>
<header class="card__header">
<h5>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<article class="card__content">
<header class="card__header">
<h5>
Has card__content as 1st elemen and act as container
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<section class="card__media">
<img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Has card__content as 2nd element and act as container
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
</article>
<article class="card">
<header class="card__header">
<h5>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
<section class="card__media">
<img src="././assets/imagination.jpg" />
</section>
</article>
<article class="card">
<header class="card__header">
<h5>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
<section class="card__media">
<img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
</section>
<header class="card__header">
<h5>
Some teks for title for second card
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/vasilis-karkalas-i8cDJOiIvTo-unsplash.webp" />
</section>
<header class="card__header">
<h5>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<header class="card__header">
<h5>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
<section class="card__media">
<img src="./assets/aByRQg2_700b.jpg" />
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
</section>
<header class="card__header">
<h5>
Some teks for title for second card
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="card">
<section class="card__media">
<img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
</section>
<header class="card__header">
<h5>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
</div>
Support Classes and Attributes
Changing the appearance:
cards--media-sticks-to-border if the media is the first or last element, this class makes it flush with the card's edges (note: this doesn't affect cards--cover).
cards--cover forces all card__media sub-elements to fill the entire grid area.
cards--horizontal switches the layout to a side-by-side (horizontal) orientation.
cards--auto-fit if there are at least 3 child elements, this class sets a minimum width of 280px for each, automatically fitting as many cards as possible into the viewport.
cards--scrollable lines up the cards horizontally and enables scrolling on the parent container.
cards--horizontal-nav adds built-in navigation controls to scroll through cards--scrollable items to the left or right.
Specific behaviors:
cards.
card.
card__content a helper container for grouping sub-elements when needed.
card__media .
card__header .
card__body .
be-prev-nav when using cards--horizontal-nav, use this attribute to swap out the "previous" icon. It defaults to <.
be-next-nav when using cards--horizontal-nav, use this attribute to swap out the "next" icon. It defaults to >.
Slide
Slide
The slide component is actually just a variation of cards using the cards--slide. Because it’s so versatile, we decided to give it its own dedicated category.
Some teks for title
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Has element card__content
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
No card__content
Some teks for its subheader
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
Some teks for title
Some teks for its subheader
Some teks for title for second card
Some teks for its subheader
Some teks for title
Some teks for its subheader
Some teks for title
Some teks for its subheader
Some teks for title for second card
Some teks for its subheader
Some teks for title
Some teks for its subheader
View code
<section class="slide">
<div class="slide__items cards cards--slide">
<article class="slide__item card">
<input type="radio" id="card-slide-1" class="invisible" data-slide-select-handler name="card-slide" checked>
<section class="card__media">
<img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-2" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Has element card__content
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-3" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/imagination.jpg" />
</section>
<header class="card__header">
<h5>
No card__content
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
<p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
</section>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-4" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h5>
</header>
<section class="card__body">
</section>
</article>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-5" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Some teks for title for second card
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
</section>
</article>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-6" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/aByRQg2_700b.jpg" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
</section>
</article>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-7" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/vasilis-karkalas-i8cDJOiIvTo-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Some teks for title
<small class="subheader">
<!-- some teks -->
Some teks for its subheader
</small>
</h5>
</header>
<section class="card__body">
</section>
</article>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-8" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Some teks for title for second card
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
</section>
</article>
</article>
<article class="slide__item card">
<input type="radio" id="card-slide-9" class="invisible" data-slide-select-handler name="card-slide">
<section class="card__media">
<img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
</section>
<article class="card__content">
<header class="card__header">
<h5>
Some teks for title
<p class="subheader">
<!-- some teks -->
Some teks for its subheader
</p>
</h5>
</header>
<section class="card__body">
</section>
</article>
</article>
</div>
<div class="slide__indicators">
<label class="slide__indicator-item"
for="card-slide-1"
aria-controls="card-slide-1"></label>
<label class="slide__indicator-item"
for="card-slide-2"
aria-controls="card-slide-2"></label>
<label class="slide__indicator-item"
for="card-slide-3"
aria-controls="card-slide-3"></label>
<label class="slide__indicator-item"
for="card-slide-4"
aria-controls="card-slide-4"></label>
<label class="slide__indicator-item"
for="card-slide-5"
aria-controls="card-slide-5"></label>
<label class="slide__indicator-item"
for="card-slide-6"
aria-controls="card-slide-6"></label>
<label class="slide__indicator-item"
for="card-slide-7"
aria-controls="card-slide-7"></label>
<label class="slide__indicator-item"
for="card-slide-8"
aria-controls="card-slide-8"></label>
<label class="slide__indicator-item"
for="card-slide-9"
aria-controls="card-slide-9"></label>
</div>
<button class="slide__navigator-prev">
<i be-icon="chevron"></i>
</button>
<button class="slide__navigator-next">
<i class="flip" be-icon="chevron"></i>
</button>
</section>
You can use any cards attribute or helper class here without any issues, they’re fully compatible.
Support Classes and Attributes
Changing the appearance:
cards--slide turns the cards component into a slider.
slide.
slide__items.
slide__item .
slide__navigator-prev .
slide__navigator-next .
slide__indicators .
slide__indicator-item .
Accordions
Accordions
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
View code
<div class="accordions">
<div class="accordion">
<label id="header-1" class="accordion__header" for="accordion-handler-1">
<input type="checkbox" id="accordion-handler-1" class="invisible" name="samp-accordion-1" data-accordion-select-handler checked>
Accordion 1
<i class="visual-indicator" be-icon="chevron"></i>
</label>
<div id="section-1" class="accordion__body">
<div class="accordion__overflow">
<div class="accordion__content">
<!-- Accordions content -->
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
<br/>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
<br/>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</div>
</div>
</div>
</div>
<div class="accordion">
<label class="accordion__header" for="accordion-handler-2">
<input type="checkbox" id="accordion-handler-2" class="invisible" name="samp-accordion-1" data-accordion-select-handler>
Accordion 2
<i class="visual-indicator" be-icon="chevron"></i>
</label>
<div id="section-2" class="accordion__body">
<div class="accordion__overflow">
<div class="accordion__content">
<!-- Accordions content -->
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</div>
</div>
</div>
</div>
<div class="accordion">
<label class="accordion__header" for="accordion-handler-3">
<input type="checkbox" id="accordion-handler-3" class="invisible" name="samp-accordion-1" data-accordion-select-handler>
Accordion 3
<i class="visual-indicator" be-icon="chevron"></i>
</label>
<div id="section-3" class="accordion__body">
<div class="accordion__overflow">
<div class="accordion__content">
<!-- Accordions content -->
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
<br/>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</div>
</div>
</div>
</div>
</div>
The accordions component has a default height of 290px, but feel free to adjust it to fit your needs.
To stack your accordions vertically, just add the accordions--vertical class. If you want the layout to adapt based on the component's width, use a helper class like accordions--sm-vertical, this keeps things vertical as long as the component is under 768px wide. For this responsive behavior to work, make sure the accordions component is wrapped in an element with container-type: inline-size; or simply add a container* class.
//Must set accordions height
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
View code
<div class="container">
<div class="accordions accordions--xs-vertical accordions--vertical-height-auto" style="height: 400px;">
<div class="accordion">
<label id="header-7" class="accordion__header" for="accordion-handler-7">
<input type="radio" id="accordion-handler-7" class="invisible" name="dynamic-accordion" data-accordion-select-handler checked>
Accordion 7
<i class="visual-indicator" be-icon="chevron"></i>
</label>
<div id="section-7" class="accordion__body">
<div class="accordion__overflow">
<div class="accordion__content">
<!-- Accordions content -->
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
<br/>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
<br/>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</div>
</div>
</div>
</div>
<div class="accordion">
<label class="accordion__header" for="accordion-handler-8">
<input type="radio" id="accordion-handler-8" class="invisible" name="dynamic-accordion" data-accordion-select-handler>
Accordion 8
<i class="visual-indicator" be-icon="chevron"></i>
</label>
<div id="section-8" class="accordion__body">
<div class="accordion__overflow">
<div class="accordion__content">
<!-- Accordions content -->
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</div>
</div>
</div>
</div>
<div class="accordion">
<label class="accordion__header" for="accordion-handler-9">
<input type="radio" id="accordion-handler-9" class="invisible" name="dynamic-accordion" data-accordion-select-handler>
Accordion 9
<i class="visual-indicator" be-icon="chevron"></i>
</label>
<div id="section-9" class="accordion__body">
<div class="accordion__overflow">
<div class="accordion__content">
<!-- Accordions content -->
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
<br/>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</div>
</div>
</div>
</div>
</div>
</div>
To make sure only one panel stays open at a time, just swap out the <input [type="checkbox"]> for an <input [type="radio"]> and make sure they all share the same [name="{value}"] attribute.
Support Classes and Attributes
Specific behaviors:
accordions--vertical forces a vertical (stacked) layout.
accordions--xs-vertical sets a dynamic layout that stacks vertically when the component is under 640px wide and switches to horizontal when it’s wider.
accordions--sm-vertical sets a dynamic layout that stacks vertically when the component is under 768px wide and switches to horizontal when it’s wider.
accordions--md-vertical sets a dynamic layout that stacks vertically when the component is under 1280px wide and switches to horizontal when it’s wider.
accordions--vertical-height-auto when in vertical mode, this removes the fixed height limit and lets the component grow naturally.
BakungCss supports 15 tab controls out of the box. If that’s not enough, a bit of JavaScript can remove those limits. To handle the active state yourself, simply apply the [data-tab-active] attribute to both the tab__nav and the corresponding tab__content.
Support Classes and Attributes
Switch the display position:
tabs--right
tabs--bottom
tabs--left
Appear
Appear
You can put appear any where!
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
1 Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
View code
<label class="btn" for="appear-1">Display!</label>
<br/>
You can put appear any where!
<div class="appear">
<input type="checkbox" id="appear-1" class="invisible" data-appear-handler name="appear">
<div class="appear__overflow">
<div class="appear__content">
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</div>
</div>
</div>
<div style="height: 300px; display: flex;">
<div class="appear-sibling">
<label class="btn btn--primary" for="appear-right-expand">
push right!
</label>
<p>
1 Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</p>
</div>
<section class="appear appear--right">
<input type="checkbox" id="appear-right-expand" class="invisible" data-appear-handler name=" appear-right-expand">
<div class="appear__overflow">
<div class="appear__content">
<p>
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
</p>
</div>
</div>
</section>
</div>
The appear component is basically a better version of <details> and <summary>. You can use it solo, but it’s best when paired with other elements inside a row or column based container, like one using display: flex;.
The appear component isn't just for static elements—it can also be used as a floating layer that doesn't mess with your page layout. To make a hidden container slide into the page as an overlay, just add the appear--offcanvas class.
If you know the container's height or width won't be changing, go ahead and add the appear--fix class.
Sometimes you might want a mix of both a floating overlay that switches to a "push" effect on larger screens. To do this, swap out appear--offcanvas for appear--vsm-offcanvas (which keeps the overlay behavior up to 768px) or appear--vmd-offcanvas (up to 1280px).
Container layouts based on where the appear component pops up:
