If you want to customize your Cards app using CSS in your Template sheet, this article provides a list of the main snippets of CSS code you might need.

2

The Cards app must be linked to a working template. Otherwise, the Cards app displays blank cards, as shown in the image below.

To know how to create a template, read the following: Awesome Table templates

Depending on your use case, you can add to your template:

• HTML code, to specify the layout or the way you want to present your data.
• Markers, to make your template dynamic: {{markers}}

Learn more: Create and set up your HTML template

• CSS code, to customize colors, font, size and placement of elements (headings, paragraphs, images, and lists). Learn more: Create and set up your CSS template
  
• Javascript, to add sophisticated behaviors or actions in your Awesome Table app. Learn more: Set up the JavaScript template
  
• Header, to display a static element on your Awesome Table app. Learn more: Header templates
  

You can make a copy of our CSS tricks app with a pre-configured template, at any stage during this article. Follow the link below to open the app. Then, click Use template.

Get Google Sheets [DOC] Cards View - CSS tricks

Open your Google spreadsheet:

Customize your titles

Change the title font style

If you want to change the font size of the titles in your app, copy the following code and paste it in your Template sheet, under the <style> column:

.header {    
font-family: 'fantasy', cursive;
}

Awesome Table needs to know where you want to apply a different font. In our example, we want the Name column to have a different font in the Cards app.

Under the Trainings column (cell A2) add:

<p class="header">{{Name}}</p>

The CSS selector and the value of the class have to be the same. In our example, we decided to call it header.

If you choose a font style that is not installed on your computer, add the Google font source link on another column. For example: <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">

Find more font on the Google font website.

Example of a Cards app with header font style 'fantasy', cursive;

Make sure the template sheet range under Advanced Parameters is up to date.

Change the font size of titles

If you want to change the font size of the titles in your app, copy the following code and paste it in your Template sheet, under the <style> column:

.header {    
   font-size: 20px; 
} 

Awesome Table needs to know where you want to apply a different font size. In our exemple, we want the Name column to have a different font size in the Cards app.

Under the Trainings column add:

<p class="header">{{Name}}</p>

The CSS selector and the value of the class have to be the same. In our example, we decided to call it header.  

Example of a Cards app with 20px title font size

Make sure the template sheet range under Advanced Parameters is up to date.

You can change the font and the size of your titles at the same time. To do so, copy the following code and paste it in your Template sheet, under the <style> column:

.header {  
   font-family: 'fantasy', cursive;   
   font-size: 20px; 
} 

Customize your content

Change the content font style

If you want to change the content font style of your app, copy the following code and paste it in your Template sheet, under the <style> column:

.card-content{
font-family: 'Oswald', sans-serif;
} 

If you choose a font style that is not installed on your computer, add the Google font source link on another column. In our example, we added: <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">

Find more font on the Google font website.

Example of a Cards app with content font style 'Oswald', sans-serif;

Make sure the template sheet range under Advanced Parameters is up to date.

Change the content font size

If you want to change the content font size of your app, copy the following code and paste it in your Template sheet, under the <style> column:

.card {
font-size: 20px;
}

Example of a Cards app with 15px font size

Make sure the template sheet range under Advanced Parameters is up to date.

Customize your images

Add images and modify their size

To add an image, copy the following code and paste it in your Template sheet: 

<img class="Image" src="https://i.imgur.com/om5M8uU.png"/> 

To change the size of your images, copy the following code and paste it in your Template sheet on another column:

.Image {    
height: 124px; 
width: 124px; 
} 

You can also change the name of the class selector, but make sure the class of HTML element that contains your marker has the same name (green text).

Example of a Cards app with a 124px size image displayed on every card

Add different images

To add different images, copy the following code and paste it in your Template sheet to get all the links from the data sheet:

<img class="Image" src="{{Cards}}"/> 

In our example, our list of image links is in the column Cards, on our data sheet called Training module.

In our Template sheet, we added the column <style> to make sure our images are displayed with the right size.

Example of a Cards app with different images