--- title: "Component CSS blocks" description: "Turn component CSS families on or off and configure their icons and counts with the blocks option." requested_language: hu language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/hu/next/styling/blocks version: unreleased (main) docs_index: https://docs.systhema.app/hu/next/llms.txt --- > This page isn't translated yet. Showing English. The `blocks` option of `systhema.config` decides which component CSS families the Tailwind plugin emits, and configures the few that take settings (icons, column counts). Every block is on by default; turn off the ones a project does not use to keep the stylesheet small. ## Configuring blocks Each key accepts a boolean. The blocks that take settings also accept an object; an object turns the block on unless it sets `enabled: false`, so `false` and `{ enabled: false }` both disable a block. ```ts title="systhema.config.ts" import type { SysthemaConfig } from '@systhemaui/core' const config: SysthemaConfig = { blocks: { carousel: false, gallery: false, columns: { count: 6 }, grid: { paddingCols: 8 }, accordion: { openRotate: 45 }, }, } export default config ``` Your `blocks` object is merged into the defaults, so list only the blocks you change. ## Every block | Block | Default | Settings | Emits | | -------------------- | ------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | | `rootVariables` | on | – | The `:root` token variables and `[data-theme]` bindings ([Root variables](https://docs.systhema.app/hu/next/styling/css-variables.md#root-variables)) | | `variablesUtilities` | on | – | `variables`, `theme-*` and `sizing-*` ([Variable utilities](https://docs.systhema.app/hu/next/styling/css-variables.md#variable-utilities)) | | `applicationLayout` | on | – | Base layout rules: `html`, `body`, `main`, `container`, `skip-link`, `figure` | | `swiper` | on | – | Swiper base styles for [Gallery](https://docs.systhema.app/hu/next/components/gallery.md) and [Carousel](https://docs.systhema.app/hu/next/components/carousel.md) | | `grid` | on | `paddingCols` (`6`) | [Grid](https://docs.systhema.app/hu/next/styling/grid.md) utilities, `col-mx-0` to `col-mx-` | | `gap` | on | – | [Gap](https://docs.systhema.app/hu/next/styling/gap.md) utilities | | `typography` | on | – | [Typography](https://docs.systhema.app/hu/next/styling/typography.md) text style and color classes | | `link` | on | – | [Link](https://docs.systhema.app/hu/next/components/link.md) | | `layout` | on | – | `bg-layout-*` ([Colors](https://docs.systhema.app/hu/next/styling/colors.md#layout-backgrounds)) | | `container` | on | – | `*-container` utilities ([Container](https://docs.systhema.app/hu/next/styling/container.md)) | | `header` | on | `subNavigationIcon`, `menuIcon` | [Header](https://docs.systhema.app/hu/next/components/header.md) | | `footer` | on | – | [Footer](https://docs.systhema.app/hu/next/components/footer.md) | | `article` | on | – | [Article](https://docs.systhema.app/hu/next/components/article.md) | | `hero` | on | – | [Hero](https://docs.systhema.app/hu/next/components/hero.md) | | `section` | on | – | [Section spacing](https://docs.systhema.app/hu/next/styling/section-spacing.md) utilities | | `columns` | on | `count` (`4`) | [Columns](https://docs.systhema.app/hu/next/components/columns.md), `columns-cols-1` to `columns-cols-` | | `feature` | on | – | [Feature](https://docs.systhema.app/hu/next/components/feature.md) | | `stack` | on | – | [Stack](https://docs.systhema.app/hu/next/components/stack.md) | | `gallery` | on | `prevIcon`, `nextIcon` | [Gallery](https://docs.systhema.app/hu/next/components/gallery.md) | | `figure` | on | – | [Figure width](https://docs.systhema.app/hu/next/styling/figure-width.md) classes | | `richtext` | on | – | The `richtext` rhythm ([Spacing model](https://docs.systhema.app/hu/next/concepts/spacing-model.md)) | | `icon` | on | – | [Icon](https://docs.systhema.app/hu/next/components/icon.md) | | `list` | on | `checkedIcon`, `uncheckedIcon` | [List](https://docs.systhema.app/hu/next/components/list.md) | | `media` | on | `overlayIcon` | [Image](https://docs.systhema.app/hu/next/components/image.md), [Video](https://docs.systhema.app/hu/next/components/video.md), [MediaWrapper](https://docs.systhema.app/hu/next/components/media-wrapper.md) | | `carousel` | on | `wrapperPrevIcon`, `wrapperNextIcon`, `bottomPrevIcon`, `bottomNextIcon` | [Carousel](https://docs.systhema.app/hu/next/components/carousel.md) | | `avatar` | on | – | [Avatar](https://docs.systhema.app/hu/next/components/avatar.md) | | `button` | on | `icon` | [Button](https://docs.systhema.app/hu/next/components/button.md) | | `chip` | on | – | [Chip](https://docs.systhema.app/hu/next/components/chip.md) | | `card` | on | – | [Card](https://docs.systhema.app/hu/next/components/card.md) | | `accordion` | on | `closedIcon`, `openedIcon`, `openRotate` (`false`) | [Accordion](https://docs.systhema.app/hu/next/components/accordion.md) | | `quote` | on | `icon` | [Quote](https://docs.systhema.app/hu/next/components/quote.md) | | `separator` | on | – | [Separator](https://docs.systhema.app/hu/next/components/separator.md) | | `form` | on | `selectIcon`, `checkboxIcon` | [Form](https://docs.systhema.app/hu/next/components/form.md) controls | | `posts` | on | – | Posts module presentation ([PostsList CSS](https://docs.systhema.app/hu/next/components/posts-list.md#html-and-css)) | | `cookieConsent` | on | – | [Cookie consent banner](https://docs.systhema.app/hu/next/components/cookie-consent-banner.md) | > [!NOTE] > `rootVariables`, `variablesUtilities` and `applicationLayout` are accepted by the config type but not read: their CSS is always emitted, because every other block depends on it. The [parallax](https://docs.systhema.app/hu/next/styling/parallax.md) CSS has no block flag either; it is always emitted and configured with the top-level `parallax` option. ## Icons Icon settings are CSS `mask-image` values. The icon is painted in the element's current color through the mask, so the SVG's own fill does not matter. Pass a data URL: ```ts title="systhema.config.ts" const chevron = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E")` const config: SysthemaConfig = { blocks: { header: { subNavigationIcon: chevron }, form: { selectIcon: chevron }, }, } ``` Encode `<`, `>` and `#` in the SVG (`%3C`, `%3E`, `%23`) and use single quotes inside it, as above. The header menu toggle takes either a pair of static icons or the built-in animated icon: ```ts title="systhema.config.ts" const config: SysthemaConfig = { blocks: { header: { menuIcon: { type: 'animated' } }, }, } ``` With `type: 'static'` (the default), set `openIcon` and `closeIcon` the same way as the other icons. For the accordion, `openedIcon` replaces `closedIcon` while an item is open, and `openRotate` rotates the icon by that many degrees when open (`false`, the default, does not rotate). Both icons also accept `false`: no closed icon, or no swap. ## Blocks that borrow another block's classes Some component rules apply another block's utility instead of repeating its declarations: `.form-label` takes `text-form-label`, and formatted rich text takes the heading styles, `link`, `quote`, `separator` and the list classes. Those bindings follow the flag of the block that owns the class, so turning `link` off while keeping `richtext` on skips the link binding instead of breaking the build. See [Components that borrow another block's classes](https://docs.systhema.app/hu/next/styling/cascade-layers.md#components-that-borrow-another-blocks-classes). Container blocks (`stack`, `card`, `hero`, `columns` and others) also suppress the scroll reveals of their children; see [Child reveals](https://docs.systhema.app/hu/next/styling/animation.md#child-reveals). ## Related - [Tailwind integration](https://docs.systhema.app/hu/next/styling/tailwind.md) - [Cascade layers](https://docs.systhema.app/hu/next/styling/cascade-layers.md) - [systhema.config reference](https://docs.systhema.app/hu/next/reference/config.md#blocks)