What is the height of standard widgets and how do i get the shadow of f7-card?
The overall height of the widget is determined by it’s contents, but it is the CSS variables that determine the overall design of the component.
Assuming that you are creating your own widget, the f7 documentation is your friend here:
[Cards | Framework7 Documentation] Cards | Framework7 Documentation. The classes and default CSS style options are the most useful sections for widget development.
no-shadow class does what you need I added a simple override to a default style in the snippet below. I’ve made some assumptions so hope this helps.
component: f7-card config: class: - no-shadow style: --f7-card-bg-color: red title: '=(props.item) ? "State of " + props.item : "Set props to test!"' footer: =props.prop1 content: =items[props.item].displayState || items[props.item].state
So I did an F12 / Inspect. Used Ctrl + Shift + C to select the default card. Filtered the applied styles for height, shadow and radius. Copied the styles from the default card and added to the styles of the custom widget.
component: f7-card config: title: '=(props.item) ? "State of " + props.item : "Set props to test!"' footer: =props.prop1 content: =items[props.item].displayState || items[props.item].state style: height: 120px border-radius: var(--f7-card-expandable-border-radius) box-shadow: var(--f7-card-expandable-box-shadow)