dependabot[bot]
2025-09-28 3ff7ca4155f5e9f03e2304b33a89de4b0a6aaa2c
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.