Marco Ciotola
2025-11-02 0ecb859d2d826f1813b49e2b63fa37d1e7151a1d
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.