Rapid start

For your own copy

By default, the Cards layout shows 2 cards across by 100 cards down and presents the first 10 columns of data. Although this layout clearly includes the data, it's not as clean as a "business card" would be.

To make a great business card, let's clean up the layout:

Remove or edit most of the labels.

Make the picture bigger.

Create an actionable "Contact the senator" link.

Here's what we're going for:

Customize the card layout

Rapid start

If you're using the demo data, you need your own editable copy of the card layout. Do this one of two ways:

Click the "Cards 1" tab and choose Duplicateor

Select [+] > Add card layout.

Everyone

Select Tools > Change card layout.
The Automatic layout makes it easy to select or deselect columns, but for this tutorial, we're going to take full control with the Custom layout.

Click the Custom tab.
This feature allows you to customize the HTML template for the cards, including changing the labels, arrangement to make detailed adjustments to features such as the font and the card size.

The next two sections build on what you've just accomplished. The first explains the template in more detail, so you can play with tweaking the template yourself and see the results. The second tells how to publish and share your new business card layout.

Optional: Behind the scenes

This section walks through the template code to understand a bit more how it is turning data into a layout. If you'd prefer, skip to the Publish section below.

Column names in curly brackets

The template code is basic HTML and exactly what you'd write for a webpage...except for this one aspect.

Think of each business card as its own little webpage. But to spare you the trouble of writing everything out, such as the name for each senator, you can just grab the value from your data table using {Name}.

The data from columns can be displayed, or it can be part of other webpage elements too. The following line of code creates the link at the bottom of the business card. It sets up a link using the information from the Contact column and tells that link to open in a new window. Then it creates the link's text using the word "Contact" and fills in the senator's name:

<a href="{Contact}" target="_blank">Contact {Name}</a>

In-line .css styling

The template uses in-line styles to change the appearance of text and improve the readability of the data.

The URL for each senator's photo is in the Image column. The minimal tag for putting the image in the template is:

<img src="{Image}">

However, the photos natively are much larger than business card size, requiring use of style="height: 150 px; width: 119px;" to display at a reasonable size. (If you own the images, speed content loading time by making the file only as big as needed.) Now we have:

<img src="{Image}" style="height: 150 px; width: 119px;">

Two additions help control the relative position of the image to the rest of the text: float: left and padding 8 px.

The title attribute gives the senator's name in a tool-tip on rolling over the image. The alt attribute shows the senator's name when the image doesn't load or for screenreaders.

Now share!

Ready to share your senator business cards? Maybe you'd like to filter for all the Independent senators, or all the senators for a given class, and share that list by e-mail or embed them in a website.

Your options depend on whether you're a viewer or an owner of the data.

Rapid start

You created your own tab as a viewer of our demo data. To share, grab a link to the filtered card layout using Tools > Publish.

For your own

As the owner of the table, you can click Share to share the document with anyone you like. They will see the updated table and tabs you've created. You can move the card layout tab to the front to be the default view of the document. Editors will be able to change the document too.Viewers will be able to play with it but not change it (like the Rapid start folks did with our demo data).