A component for fixing an element’s width to the current breakpoint.
Content before
WidgetWrapperContent after
---
import { WidgetWrapper } from '@yatoday/astro-ui/astro';
---
<WidgetWrapper>
<div>Content inside `WidgetWrapper`</div>
</WidgetWrapper>Content before
WidgetWrapperContent after
---
import { WidgetWrapper } from '@yatoday/astro-ui/astro';
---
<WidgetWrapper>
<div>Content inside `WidgetWrapper`</div>
<Fragment slot="bg">
<div className="absolute inset-0 bg-zinc-500"></div>
</Fragment>
</WidgetWrapper>Content before
WidgetWrapperContent after
---
import { WidgetWrapper } from '@yatoday/astro-ui/astro';
---
<WidgetWrapper containerClass="text-center py-6 md:py-6 lg:py-6">
<div>Content inside `WidgetWrapper`</div>
</WidgetWrapper>| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Set to specify a unique id for an HTML element |
as | string | section | HTML tag name for the wrapper |
containerClass | string | - | Additional CSS classes to apply to the wrapper |
isDark | boolean | false | Adds the dark CSS class to the wrapper |
bg | string | - | Set background element |