BVBFuchs
2025-09-15 7bcab60f3ef83e31b7d1714a470f359c2b3daa4c
docs/layout-components.md
@@ -41,6 +41,15 @@
})
```
> [!note] Overriding behavior
> Components inside `Flex` get an additional CSS class `flex-component` that add the `display: flex` property. If you want to override this behavior, you can add a `display` property to the component's CSS class in your custom CSS file.
>
> ```scss
> .flex-component {
>   display: block; // or any other display type
> }
> ```
## `MobileOnly` Component
The `MobileOnly` component is a wrapper that makes its child component only visible on mobile devices. This is useful for creating responsive layouts where certain components should only appear on smaller screens.
@@ -81,4 +90,13 @@
})
```
This example would only render the Search component when the page is not in fullpage mode.
The example above would only render the Search component when the page is not in fullpage mode.
```typescript
Component.ConditionalRender({
  component: Component.Breadcrumbs(),
  condition: (page) => page.fileData.slug !== "index",
})
```
The example above would hide breadcrumbs on the root `index.md` page.