{"id":6883,"date":"2021-06-04T19:19:56","date_gmt":"2021-06-04T19:19:56","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=6883"},"modified":"2021-06-07T16:37:40","modified_gmt":"2021-06-07T16:37:40","slug":"how-to-create-a-card-layout","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2021\/06\/04\/how-to-create-a-card-layout\/","title":{"rendered":"How to Create a Card Layout"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

A Card Layout is an excellent way to organize multiple longform content pieces into smaller, bite-sized sections. For instance, if you have a list of articles, you can use a card layout to better organize and summarize them, complemented by additional visual components like images.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You will learn how to create these using the tools at your disposal through the Cascade editor and additional HTML coding. For the purposes of this training, you will make 3×3 tables to achieve the card layout. These dimensions have been proven successful since 3 rows can fit an image row, one for a title and another for content and 3 columns compliment that successfully, but that can be reduced to or expanded upon depending on your card layout needs.<\/p>\n\n\n\n

\n\n\n\n

Step 1<\/h2>\n\n\n\n

Click on the Edit button of your site. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once the Cascade web editor opens, scroll down to work on the main-body-content<\/strong> and click on a button that looks like this \u201c<>\u201d to edit the source code. <\/p>\n\n\n\n

Step 2<\/h2>\n\n\n\n

Type in a code such as the one shown below:<\/p>\n\n\n\n

<table summary=\"here you write the card summary\">
<tbody>
<tr>
<td>Image<\/td>
<td>Image<\/td>
<td>Image<\/td>
<\/tr>
<tr>
<td class=\"card-title\">
<h4>Title<\/h4><\/td>
<td class=\"card-title\">
<h4>Title<\/h4><\/td>
<td class=\"card-title\">
<h4>Title<\/h4><\/td>
<\/tr>
<tr>
<td>Content<\/td>
<td>Content<\/td>
<td>Content<\/td>
<\/tr>
<\/tbody>
<\/table>
<style><!--
table {width: 100%;}
    td {
        width: 33%;
        height: 100px;
        vertical-align: top;}
    .card-title {
        border-bottom: 1px solid white !important;}
--><\/style><\/code><\/td>		\u2190 defines and summarizes a table
\u2190 groups the body content
\u2190 defines a row in a table
\u2190 switch out the word \u201cImage\u201d and add your image; make sure to crop all images to the same dimensions!
\u2190 defines a cell and the \u201ccard-title\u201d for styling purposes

\u2190 switch out the word \u201cTitle\u201d for the actual title of the card entry\u2026 repeat

\u2190 switch out the word \u201cContent\u201d & add your content; you can add text and\/or links to internal\/external resources as needed


\u2190 defines the table\u2019s style
\u2190 defines the cells’s style
\u2190 defines column width
\u2190 defines row height
\u2190 aligns content to top rows
\u2190 \u201ccard-title\u201d label styling
\u2190 converts that border to white to create an invisible-like effect
<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The previous code should look something like the following when previewed\/published\u2026<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
Note: if you need to increase or decrease the amount of columns you need, you must go to the source code and either write in or delete the amount of <td><\/td> code you have. Also, make sure that the width of the cells in the style section of the code is set to the proper percentage of the total table width. Otherwise, you will have formatting issues.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Step 3<\/h2>\n\n\n\n

Add your content! Using the Cascade WYSIWYG editor add:<\/p>\n\n\n\n