This package adds a simple node type that receives a subset of one or multiple editor-selectable classes with the intention to control the display of content dependent on device breakpoints.
The content element created by this package is intended to be used as a container to wrap the content which needs to be displayed conditionally. This container then receives classes (see below) that require to be styled as needed, for example by setting the base class to 'display: none;' and then using media-queries to re-enable the display for a given breakpoint.
The wrapper receives a base class of 'breakpoint-conditional-content' irrespective of selected breakpoints.
- xs:
- intended for Mobile / Extra small
- assigned class: 'breakpoint-xs'
- sm:
- intended for Mobile / Small
- assigned class: 'breakpoint-xs'
- md:
- intended for Tablet / Medium
- assigned class: 'breakpoint-md'
- lg:
- intended for Desktop / Large
- assigned class: 'breakpoint-lg'
- xl:
- intended for Desktop / Extra large
- assigned class: 'breakpoint-xl'