Responsive Properties
Responsive Properties
Responsive properties allow a component to apply different values for a property depending on the viewport width without using JavaScript.
Properties that support responsive values are easily recognizable in the documentation of a component. Watch out for the "responsive" badge.
Usage
Besides providing a single value to a property, as usual, a responsive property can also take one or many value-breakpoint pairs.
<cosmos-story-card layout="compact@small normal@large compact@x-large">
...
</cosmos-story-card>A value-breakpoint pair is declared as {value}@{breakpoint}and defines the value that should be applied to a property at the specified breakpoint. Available breakpoints and the corresponding viewport width can be found in the Cosmos Foundation: Breakpoint
💡 Pro Tip
An easy way to remember the syntax is to read it out loud:
For example layout="compact@medium normal@large" can be read like "The layout is compact at the medium breakpoint, and normal at the large breakpoint."
The values for a breakpoint are valid for the given breakpoint and upwards: For example layout="compact@small normal@x-large"sets the layout to compact starting at the small breakpoint and keeping it up to the x-large breakpoint, also for the medium and large breakpoints.
For breakpoints smaller than the ones defined for the property, the default value is applied. For example, if the layout property default is normal, it will be normal until the medium breakpoint for a definition like layout="compact@medium normal@large".
Examples
Here are a few more examples:
- layout="compact@small" will apply a compact layout throughout all breakpoints and is equal to layout="compact" .
- layout="compact@small normal@medium" will apply a compact layout on small screens, and starting with the medium breakpoint, it'll use a normal layout.
- layout="compact@large" will apply the normal layout, the default value, until the breakpoint is large. This is where it switches to a compact layout.