Edit Dynamic Template

<div class="post-list--col" onclick="document.location = '[? $post['post_content_url']?]'; return false;"> <logic:if test="$post['post_icon']"> <div class="post-list--img"> <standard:image src="[? $post['post_icon'] ?]" alt="[? $post['post_title'] ?]" lazy="true" /> </div> </logic:if> <div style="padding: 2rem"> <hr /> <h3><span style="color: #333333;"><strong>[? $post['post_title'] ?]</strong></span></h3> <logic:if test="$post['post_category_id'] == 1"> <table border="0" width="100%"> <tr> <td width="30px" style="vertical-align: top;"> <standard:icon library="fontawesome" iconstyle="solid" iconname="calendar" style="width: 15px; height: 15px;" /> </td> <td width="auto"> <logic:if test="$post['post_event_start_date']"> <logic:if test="formatDate($post['post_event_start_date'], 'yyyy') == date('Y')"> [? formatDate($post['post_event_start_date'], 'MMM dd') ?] </logic:if> <logic:else>[? formatDate($post['post_event_start_date']) ?]</logic:else> </logic:if> <logic:if test="$post['post_event_end_date']"> <logic:if test="formatDate($post['post_event_start_date']) != formatDate($post['post_event_end_date'])"> <logic:if test="formatDate($post['post_event_end_date'], 'yyyy') == date('Y')"> - [? formatDate($post['post_event_end_date'], 'MMM dd') ?] </logic:if> <logic:else>- [? formatDate($post['post_event_end_date']) ?]</logic:else> </logic:if> </logic:if> </td> </tr> </table> <table border="0" width="100%"> <tr> <td width="30px" style="vertical-align: top;"> <standard:icon library="fontawesome" iconstyle="solid" iconname="clock" style="width: 15px; height: 15px;" /> </td> <td width="auto"> [? formatDate($post['post_event_start_date']) ?] <logic:if test="formatDate($post['post_event_end_date'])"> - [? formatDate($post['post_event_end_date']) ?] </logic:if> </td> </tr> </table> <logic:if test="$post['post_event_location']"> <table border="0" width="100%"> <tr> <td width="30px" style="vertical-align: top;"> <standard:icon library="fontawesome" iconstyle="solid" iconname="location-dot" style="width: 15px; height: 15px;" /> </td> <td width="auto">[? $post['post_event_location'] ?]</td> </tr> </table> </logic:if> </logic:if> <logic:else> [?? $post['post_content_short'] ??] </logic:else> <br /><br />  <br /><br /> <logic:if test="$post['post_content_url']"> <templates:button variant="Classic" bgcolor="#c41c32" color="#fff" borderRadius="0" href="[? $post['post_content_url'] ?]">Read More</templates:button> </logic:if> </div> </div>

Declared Variables

$post
['post_id']
['post_title']
['post_content_short']
['post_icon']
['post_content_type']
['post_content_url']
['post_created_page']
['post_date']
['post_is_offline']
['post_category_id']
['contact_id']
['post_overwrite_short_color']
['post_event_status']
['post_link_button']
['post_content_short_align']
['post_previous_event']
['post_event_start_date']
['post_event_end_date']
['post_event_location']

Common Tags

<logic:if>
<logic:else>
<standard:image>

.post-list--container, .templateContainer--websitePosts-list-custom, .templateContainer--websitePosts-list-default { display: flex; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; gap: 1rem; } .post-list--col { min-width: 250px; width: 31%; margin-bottom: 2rem; position: relative; text-align: left !important; background: #fafafa; } @media (max-width: 900px) { .post-list--container, .templateContainer--websitePosts-list-custom, .templateContainer--websitePosts-list-default { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .post-list--col { width: 100% !important; } } .post-list--img { width: 100%; height: 250px; overflow: hidden; } .post-list--col img { height: 250px; width: 100%; object-fit: cover; vertical-align: bottom; transition: 0.5s all; } .post-list--col a:hover img { transform: scale(1.2); } .post-list--col a { color: #000000; } .post-list--col { background-color: #ffffff; box-shadow: 0px 3px 15px rgb(0 0 0 / 20%); } .post-list--col hr { margin: 40px 20px 20px 0; width: 40px; height: 3px; background-color: #c41c32; border: none; -webkit-transition: width 0.3s ease-out; transition: width 0.3s ease-out; } .post-list--col:hover hr { width: 70px; } .post-list--col .s8-templates-button { position: absolute; bottom: 32px; }

Changes to Design template: Email Design #1 - Posts List

Today
7:00am 220305

System
Modified design template

Today
12:40am 216729

System
Modified design template

Today
12:40am 216715

System
Modified design template

Today
12:40am 216703

System
Modified design template

Today
12:40am 216696

System
Modified design template

Yesterday
11:07pm 155929

System
Modified design template

Yesterday
11:07pm 91111

Natasha Wilkie
Modified design template

Yesterday
11:07pm 91110

Natasha Wilkie
Created design template

216729 Today 12:40am System Modified design template PART OF Find and Replace Undo	220305 Today 7:00am System Modified design template PART OF Find and Replace Undo

Html:

Design Id:

Component Class:

\Components\Website\Posts

\Components\Website\Posts

Id:

list

list

Default Variation:

Css:

.post-list--container,

.templateContainer--websitePosts-list-custom,

.templateContainer--websitePosts-list-default {

	display: flex;

	justify-content: center;

	-webkit-box-orient: horizontal;

	-webkit-box-direction: normal;

	-ms-flex-flow: row wrap;

	flex-flow: row wrap;

	gap: 1rem;

}



.post-list--col {

	min-width: 250px;

	width: 31%;

	margin-bottom: 2rem;

	position: relative;

	text-align: left !important;

	background: #fafafa;

}



@media (max-width: 900px) {

	.post-list--container,

	.templateContainer--websitePosts-list-custom,

	.templateContainer--websitePosts-list-default {

		display: grid !important;

		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	}



	.post-list--col {

		width: 100% !important;

	}

}



.post-list--img {

	width: 100%;

	height: 250px;

	overflow: hidden;

}



.post-list--col img {

	height: 250px;

	width: 100%;

	object-fit: cover;

	vertical-align: bottom;

	transition: 0.5s all;

}



.post-list--col a:hover img {

	transform: scale(1.2);

}



.post-list--col a {

	color: #000000;

}



.post-list--col

{

	background-color: #ffffff;

	box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);

}



.post-list--col hr

{

	margin: 40px 20px 20px 0;

    width: 40px;

    height: 3px;

    background-color: #c41c32;

    border: none;

    -webkit-transition: width 0.3s ease-out;

    transition: width 0.3s ease-out;

}



.post-list--col:hover hr 

{

    width: 70px;

}



.post-list--col .s8-templates-button 

{

    position: absolute;

    bottom: 32px;

}

.post-list--container,

.templateContainer--websitePosts-list-custom,

.templateContainer--websitePosts-list-default {

	display: flex;

	justify-content: center;

	-webkit-box-orient: horizontal;

	-webkit-box-direction: normal;

	-ms-flex-flow: row wrap;

	flex-flow: row wrap;

	gap: 1rem;

}



.post-list--col {

	min-width: 250px;

	width: 31%;

	margin-bottom: 2rem;

	position: relative;

	text-align: left !important;

	background: #fafafa;

}



@media (max-width: 900px) {

	.post-list--container,

	.templateContainer--websitePosts-list-custom,

	.templateContainer--websitePosts-list-default {

		display: grid !important;

		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	}



	.post-list--col {

		width: 100% !important;

	}

}



.post-list--img {

	width: 100%;

	height: 250px;

	overflow: hidden;

}



.post-list--col img {

	height: 250px;

	width: 100%;

	object-fit: cover;

	vertical-align: bottom;

	transition: 0.5s all;

}



.post-list--col a:hover img {

	transform: scale(1.2);

}



.post-list--col a {

	color: #000000;

}



.post-list--col

{

	background-color: #ffffff;

	box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);

}



.post-list--col hr

{

	margin: 40px 20px 20px 0;

    width: 40px;

    height: 3px;

    background-color: #c41c32;

    border: none;

    -webkit-transition: width 0.3s ease-out;

    transition: width 0.3s ease-out;

}



.post-list--col:hover hr 

{

    width: 70px;

}



.post-list--col .s8-templates-button 

{

    position: absolute;

    bottom: 32px;

}