Initial commit

Striven

yesterday c538c151c7462ad0395ff2c15c5e11e89e362aa8

 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.