The example above contacts are shown on white cards, divided in the following sections:

First Section: the contact name, in a big font that makes it easier to read;

Second Section: the job title and department;

Third Section: the phone number, extension, and email.

We will use fluid grids to facilitate the design of the card content. Learn more about Fluid vs Fixed Grids.

We will also use a Contacts entity with bootstrap data to better illustrate the example. Learn more about Creating Entities and Bootstrap Data from an Excel File.

On a web screen, type 'Company Contacts' as title, add a container and resize it to 7 columns.

 

Next, add a screen preparation with a query to get all contacts. On the screen, add a list records inside the container and set the source record to the query.

Now, start designing the card content.

First add a container for the card background inside the list records. Set the container style to 'CardWhite'.

Add a container inside the card container and do the following:

  1. Set the style to 'Heading 2' and margin top to '0px' (zero pixels);
  2. Put the information about the contact name in the container.

Add a container below the contact name container to put the job position and the department.

Set the margin top to '0px' and resize the container to 6 columns.

Notice how the grid is smaller! It's the grid adapting itself to the size of the container for which you are designing the content.

Add two containers inside the new container and set their margin top to '0px'.

In the top container put the job title of the contact. In the container below, put the department name and set it to style 'TextNote'.

Let's put the contacts information: phone number, extension, and email.

First, add a container to the right of the one with the job title and department. Set the margin top to '0px'.

Add a container inside for the phone number, resize it to 8 columns.

Once again, notice how the grid is adapting itself to the size of the container for which you are designing the content.

Set the margin top to '0px' and put the phone number inside the container.

Add another container (to the right of the phone number container) for the extension. Set the margin top to '0px'. Type 'Ext. ' and put the extension after it.

Finally, put the e-mail below the phone. Add a container below the container with the phone and extension. Set the margin top to '0px', and put the contact email inside with the style set to 'TextNote'.

That's it! Use the preview buttons in Service Studio to see how it works in different device sizes and notice the following:

Desktop Preview

Tablet Preview

Smartphone Preview

You may also publish it and test how it behaves while resizing the browser.

Video Recording

To see how the above steps were performed in Service Studio watch the video below.

See Also

About the Grid