Savvy Docs
  • Welcome
  • Guides
    • Intro to the builder
    • Designer Card
    • Options Card
    • Working with Logic
  • How-To's
    • General How-To's
      • ✔️How to select a container when I can’t click over it on the screen
      • 👁️How to hide a global component on a specific page
      • 📊How to calculate statistical significance from split test
      • 🅰️How to install a Google font.
      • 🗒️How to use "Logs" for debugging
      • ↩️How to change pages order
      • 🌒How to select components that are behind the Embeddables card
      • 📄How to clone a page
      • ➕How to add new components to a page
      • 📄How to select the whole page
      • 💻How to view your flow on different screen sizes
      • ⛵How to move between pages while editing your flow
    • Design How-To's
      • 🖋️How to style a specific component element (E.g. buttons image)
      • ⭕How to style individual buttons (by button key) in Options Selectors
      • 🧿How to style a rounded bullet-like checkbox for options buttons
      • 🔲How to get rid of the default input outline
      • 🖼️How to style a background image
      • 🦚How to style components (basics)
      • ↪️How to change a component's location
      • ⬆️How to upload and apply images to your design
      • 🔘How to style hover, selected, disabled button states
      • 🪶How to style CSS properties that are not there in the designer card (custom properties)
      • 📱How to make my flow responsive
    • Logic How-To's
      • 👁️How to set show/hide conditions
      • 📺How to display a value previously entered by the user
      • ✖️How to add a “Deselect All” button in a Multi-Select
      • 🔨How to use a computed field in a condition
      • 👁️How to hide a global component on a specific page
  • Other useful docs
    • Useful Docs
      • 🚦Conditions
      • 👩‍💻Computed Fields
      • 🔖Tags
    • WORK IN PROGRESS
      • ◻️Pending
        • Work in Progress: How the New Rendering Engine Works
        • Work in Progress: How to create a new Split test
        • Work in Progress: Preloading images
        • Work in Progress: How to show “loading…” while fetching or processing data
        • Work in Progress: How to send data to Tiktok
        • Work in Progress: How to send data to Postcript
        • Work in Progress: How to send data to Klaviyo
        • Work in Progress: How to send data to Google Tag
        • Work in Progress: How to send data to Google Analytics
        • Work in Progress: How to Fetch User Location Data to use in your Flow
        • Work in Progress: How to fetch job offers from Lever’s API
        • Work in Progress: How to fetch data and display the results as options in a dropdown
        • Work in Progress: How to create a new split test with 3 variants
        • Work in Progress: How to Duplicate a Container with All its Content
        • Work in Progress: How to add Chart.js to your flow
        • Work in Progress: How to Create Repeatable Button Components, Fetching from a Database
        • Work in Progress: How to Create a Global Column
        • Work in Progress: How to Clone a Flow
        • Work in Progress: How to Create and Style a Carousel
        • Work in Progress: How to Add Default User Data
        • Work in Progress: How to Show Validation Messages on Required Fields
        • Work in Progress: How to create an Option Selector Results Page
        • Work in Progress: How to create a combined Option Selector + Input component
        • Work in Progress: How to Add an Info Box Popup
        • Work in Progress: How to set up a Micro-Product as a Popup on your Site
        • Work in Progress: How to make a Full-Page Flow
        • Work in Progress: How to Use Custom Selectors
        • Work in Progress: How to Add a Video/GIF Placeholder to a Video Component
        • Work in Progress: How to Style Buttons
        • Work in Progress: How to Center Components
        • Work in Progress: How to Bring Data from Airtable
        • Work in Progress: How to add a custom font from a website:
        • Work in Progress: How to Create Computed Fields
        • Work in Progress: How to Ping an API
        • Work in Progress: How to Store a Password
        • Work in Progress: How to Bring Data from Google Sheet
        • Work in Progress: How to Fetch Safely from Savvy
        • Work in Progress: How To Fetch Data from a specific row in Airtable in a Computed Field
Powered by GitBook
On this page
  • All Designer Card Options:
  • How-tos sections:
  1. Guides

Designer Card

Quick guide to get started into styling flow components.

PreviousIntro to the builderNextOptions Card

Last updated 1 year ago

Some specific things like a few component options are set on the Options Tab, but all of the styling itself gets done in the Designer Card. Here you'll find a detailed explanation of the Designer Card and its different areas.

All Designer Card Options:

Image
Name
Description

Designer Card

This is the whole Designer card.

Styling Tags

With our builder, we ALWAYS style tags (CSS classes). So if the component you've selected doesn't have one, please "Add a tag" now.

Refining Selector

You may want to set a more specific selector. You can specify it by device or even by different parts of a component. For example, you may want to style a button's image when viewed on a mobile device for a specific tag, but only on this page. By refining the selector, you'll be fine-tuning your styles.

Screen sizes

Here you can choose on which kind of device (screen size-related) the styles you set are going to be applied. The default option is "All devices", which sets styles for computer screens. You can also choose "Tablet" or "Mobile".

+ Sub-Element

This dropdown will display a list of the sub-elements that the selected component has. From here, you can choose which specific sub-element you want to style.

+ Filter

In the "When" dropdown you'll find options like "hover", "disabled", "selected", etc. The options you'll see are going to depend on the kind of component you have selected. Within the "In" dropdown, you'll be able to limit the reach of your tag. For example, you can select "This page" so that only the components with the tag you're styling and on this page would be affected by the styles you set.

Card Tabs

Tabs are groups of CSS properties that make it easier for you to find the property you want to set. Depending on the kind of component you have selected, you'll see a different set of tabs. Keep in mind that not all CSS properties can be applied to all kinds of elements.

Custom Properties

Not every CSS property is included on our tabs. If you want to use a not-so-common property and can't find it, you can always go to the last tab "Custom" and add any existing CSS property.

Style Input Section

This is the Inputs area, which changes depending on the tab you have selected. In this image you can see the properties from the "Size" tab.

How-tos sections:

Design How-To's
General How-To's
Logic How-To's