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

Customize your titles

Change the title font style

To change the font size of the titles in your app, copy the following code and paste it in your Template sheet:

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

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

Change the font size of titles

To change the font size of the titles in your app, copy the following code and paste it in your Template sheet:

.header {    
   font-size: 20px; 
} 

In our example, we changed the font size of the titles to 20px. Our titles are in the column Name on our data sheet called Training module.

In the Template sheet, make sure you apply the CSS rule to the class of HTML element that contains your marker. In our example, the class is named header.

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.

Example of a Cards app with 20px title font size

Customize your content

Change the content font style

To change the content font style, copy the following code and paste it in your Template sheet:

.card-content{
font-family: 'modak', cursive;
} 

Example of a Cards app with content font style 'modak', cursive;

Change the content font size

To change the content font size, copy the following code and paste it in your Template sheet:

.card {
font-size: 20px;
}

Example of a Cards app with 20px font size

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