🎴

Displaying information

Once you have successfully connected your Airtable to the listing block, you can begin selecting what information to display on each view. There are two views to a listing:

Card View

This view is the single record view in the listing shown to the user.
notion image
 
There are two kinds of layout for the Card view: List and Card.
Card (left) and List(right)
Card (left) and List(right)
 

Detailed View

The detailed view is what is presented to the user when they select a record to display more information. These can be:
  1. Modal: When a user clicks on record a pop-up will be displayed. In mobile mode, this will be a full screen popup in mobile mode. Users will be able to dismiss the popup by using the mobile back button or by clicking the cross.
Modal detailed view
Modal detailed view
  1. Link: Your users will be taken to the link mapped to Call To Action URL in the card view in a new tab.
  1. Page: When a user clicks on a record, they will be taken to a page instead of a pop-up. You site header and links will also appear on the page
    1. Page detailed view
      Page detailed view
  1. Expand: This is only applicable to List type views. When a user clicks on a record, the selected record will expand displaying the information mapped to Detailed Description and Custom Links/Attachments.
    1. Record with view expanded
      Record with view expanded
  1. None: Nothing will happen when a user clicks on the record (the Call To Action button will still work)
 

Editing the Card View

To begin customising the information to display:
  1. Hover over the listing and select Edit Listing to open up the listing editor.
  1. Select the Card View button to edit the content, styles and behaviour of your listing.
    1. notion image
      Each card design comes with a set of options from your connected Airtable. Select which field to use for each option and see your card view come to life.
      Selecting the field to show on the card
      Selecting the field to show on the card
 

Editing the Detailed View

  1. Select the Detailed View button to edit the content, styles and behaviour of the view that is displayed when a user selects a record.
    1. notion image
  1. To change Detailed View Type, select the Card View tab and switch to the Actions tab.
    1. notion image
  1. Select the Appearance tab from the Detailed View to change the layout of the page or Modal.
    1. notion image
      The single column layout will stack the media information (embed, videos and images) on top of the description section.
      Single column layout in the detailed view
      Single column layout in the detailed view
      The two column layout will place the media items (embed, videos and images) to the left of the description/text section.
      Two column layout in the detailed view
      Two column layout in the detailed view
 

Looking to display approved records?

Displaying approved records