Styleguide
A living overview of the classes, utilities and visual rules we want to keep. Classes shown here are intentionally in use, so Webflow’s unused-class cleanup can safely remove the rest.
Typography
Semantic heading level stays separate from the visual type class.
Energi, der giver mening.
Theme utilities
Utilities
Corner clips
One base utility, then choose the corners and cut size.
Image shapes
Reusable shapes for cards and editorial media. Component-specific defaults can still use the same visual grammar without carrying every utility class.
Metric cards
Core class map
These are structural classes we are standardising around as the cleanup continues.
section-intromedia-sectionsmedia-sectionmedia-section__contentmedia-section__mediatext-stackbutton-grouphero-contenthero-content__headinghero-content__titlehero-content__descriptionhero-media-stagehero-media-stage__imageshero-stats-panelhero-stats-panel__innerhero-stats-panel__rowsstat-rowstat-cardstat-card__mediaClasses that explain themselves
Component = structure. Utility = reusable behavior or layout. is-* = visual or component state. data-* = JavaScript behavior. New classes avoid underscores and double-dash modifiers.
Articles & blog cards
Content classes follow the same component hierarchy. Blog view behaviour is driven by data attributes, so presentation classes can evolve without breaking the grid/list system.
article__bodyarticle__mediatoc-layouttoc-sidebartoc-sidebar__contenttoc-articleblog-cardblog-card__linkblog-card__metablog-card__mediablog-card__contentblog-card__footerblog-card__filter-datablog-card__sourceblog-card__source-markblog-card__source-labelsblog-card__read-moreblog-card__read-iconblog-view-controlsarticle__rich-textNavigation & forms
Clean structural class families. Dynamic behavior remains on data attributes and state modifiers.
underlay-nav__arrow-wrapunderlay-nav__arrownavigation__listform-field-rowform-notificationform-input is-textarearadial-gsap-slider__tagradial-gsap-slider__tag-innerSelect menu
One branded dropdown language for FAQ categories, Viden filters and future compact selectors. Classes own appearance; native open state and data attributes own behavior.
select-menuselect-menu__triggerselect-menu__chevronselect-menu__listselect-menu__itemfilter-btn is-menu-itemProcess & product systems
Reusable structure for step-based storytelling and product families. Component classes describe layout; behavior hooks stay separate until their JS migration is intentional.
process-stepsprocess-steps is-padded-bottomprocess-steps__listprocess-stepprocess-step__headerheatpump-typesheatpump-types__gridheatpump-typeheatpump-type__cardheatpump-type__mediaheatpump-type__iconheatpump-type__contentheatpump-type__statusheatpump-features__visualheatpump-features__listheatpump-featureComparison table
Reusable three-plan comparison structure. Cell meaning is data-driven, so included, excluded and text-value states stay independent from presentation classes.
comparison-wrapcomparison-headercomparison-header__cornercomparison-header__innercomparison-header__listcomparison-header__colcomparison-bodycomparison-rowcomparison-row is-categorycomparison-row__namecomparison-row__hcomparison-row__cellscomparison-row__cellcomparison-row__iconcomparison-noteFooter
Shared footer structure. Classes handle layout and appearance; data-footer-parallax* remains the behavioral API.