List B
Last updated
Last updated
Formato
Lista vertical em formato de card.
Imagem
Formato quadrado, grande e com altura variando com o texto da célula.
Url definida em detail.order = 0
.
Conteúdo
Definido em detail.order = 0
, se não tem imagem.
Definido em detail.order = 1
, se possui imagem.
Ações
Quando múltiplas: Menu suspenso exibido na lateral.
Quando única: ícone é exibido na lateral.
Observação
Para o portal especificamente, é possível adicionar a propriedade removePadding=true
, em uma tag HTML dentro do itemsList[x].details[y].value
, para que a margem superior e inferior sejam removidas, fazendo com que os itens do template MENU C fiquem mais próximos uns dos outros.
- Ex: itemsList[x].details[y].value = "<h1 removePadding=true>Título 1</h1>"
D (definições gerais da área de conteúdo da listagem)
pageContent.groupList(x).itemList(y).count
define a quantidade de itens na lista. Se nulo ou vazio, nenhum item é exibido.
pageContent.groupList(x).itemList(y).background
define a cor do background da célula. Se nulo ou vazio, a cor padrão é #FFF.
pageContent.groupList(x).itemList(y).color
define a cor da fonte dos textos e ícones da célula. Se nulo ou vazio, a cor padrão é #444.
D1
Área de exibição do elemento de imagem customizado para a template.
pageContent.groupList(x).itemList(y).detail(0)
: Se seu conteúdo iniciar com “http://" a célula deve interpretar a existência de uma imagem e exibir a área com a imagem em formato de círculo; senão, então a área é ocultada.
D2
pageContent.groupList(x).itemList(y).detail(z)
define o conteúdo da célula.
Se z>0, então os “details” serão exibidos na célula e separados por um espaço em branco.
Suporta html flexível com com conteúdo alinhado à esquerda.
Se nulo ou vazio, o espaço é exibido.
D3
pageContent.groupList(x).actions
define a lista de ações do item.
Se nulo ou vazio, o espaço é ocultado.
Suporta de 1 a N actions, sendo:
1 action: Exibir a action informada
>2 actions: Exibir o “menu de bolinhas” para acesso às demais actions através de menu suspenso.
{
"pageNavigation": {
"background": "#482073",
"title": "Lista B",
"left": {
"actions": [
{
"order": "0",
"name": "back"
}
]
}
},
"pageHeader": {
"template": "A",
"background": "#634975",
"color": "#fff",
"logo": "",
"item": {
"details": [
{
"order": 0,
"value": "Cabeçalho da Lista<br>Lorem Ipsum<br>Este cabeçalho não possui actiondefault"
}
],
"actionDefault": null,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "Residencial",
"value": "+557199999-9999"
}
]
}
]
}
},
"pageContent": {
"background": "#482073",
"contentList": [
{
"background": "#fff",
"title": "Sem Grupo",
"totalPages": 1,
"currentPage": 1,
"hasGroupBy": false,
"groupList": [
{
"template": "B",
"title": "Grupo com Foto",
"background": "#CCC",
"color": "#EE8113",
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "Residencial",
"value": "+557199999-9999"
}
]
},
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "email",
"path": "",
"parameters": [
{
"title": "",
"value": "a@a.com"
}
]
}
],
"itemsList": [
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#FFF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "https://fotos.vivadecora.com.br/fachadas-de-predios-fachada-de-predio-com-jardim-danielnunespaisagismo-73875-proportional-height_cover_medium.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "Residencial",
"value": "+557199999-9999"
}
]
},
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "email",
"path": "",
"parameters": [
{
"title": "",
"value": "a@a.com"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "",
"color": "",
"details": [
{
"order": 0,
"value": "http://webluxo.com.br/home/wp-content/uploads/2015/11/predio-ecologioco-cairo-9.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "querystring",
"value": "+557199999-9999"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#ccc",
"color": "#fff",
"details": [
{
"order": 0,
"value": "https://br.habcdn.com/files/dynamic_content/realizar-projeto-e-construir-predio-comercial-com-salas-no-1714664_gallery.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
]
}
]
},
{
"template": "B",
"title": "Grupo sem Foto",
"background": "#CCC",
"color": "#EE8113",
"itemsList": [
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#EFEFEF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "",
"value": "+557199999-9999"
}
]
},
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "email",
"path": "",
"parameters": [
{
"title": "",
"value": "a@a.com"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#EFEFEF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "querystring",
"value": "+557199999-9999"
}
]
}
]
}
]
}
]
},
{
"background": "#fff",
"title": "Com Grupo",
"totalPages": 1,
"currentPage": 1,
"hasGroupBy": true,
"groupList": [
{
"template": "B",
"title": "Grupo com Foto",
"background": "#482073",
"color": "#EE8113",
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "Residencial",
"value": "+557199999-9999"
}
]
},
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "email",
"path": "",
"parameters": [
{
"title": "",
"value": "a@a.com"
}
]
}
],
"itemsList": [
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#FFF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "https://fotos.vivadecora.com.br/fachadas-de-predios-fachada-de-predio-com-jardim-danielnunespaisagismo-73875-proportional-height_cover_medium.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "Residencial",
"value": "+557199999-9999"
}
]
},
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "email",
"path": "",
"parameters": [
{
"title": "",
"value": "a@a.com"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#FFF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "http://webluxo.com.br/home/wp-content/uploads/2015/11/predio-ecologioco-cairo-9.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "querystring",
"value": "+557199999-9999"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#FFF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "https://br.habcdn.com/files/dynamic_content/realizar-projeto-e-construir-predio-comercial-com-salas-no-1714664_gallery.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "querystring",
"value": "+557199999-9999"
}
]
}
]
}
]
},
{
"template": "B",
"title": "Grupo sem Foto",
"background": "#482073",
"color": "#EE8113",
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "Residencial",
"value": "+557199999-9999"
}
]
}
],
"itemsList": [
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#EFEFEF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "",
"value": "+557199999-9999"
}
]
},
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "email",
"path": "",
"parameters": [
{
"title": "",
"value": "a@a.com"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#EFEFEF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "querystring",
"value": "+557199999-9999"
}
]
}
]
}
]
},
{
"template": "B",
"title": "Grupo com Foto",
"background": "#482073",
"color": "#EE8113",
"itemsList": [
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#FFF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "https://fotos.vivadecora.com.br/fachadas-de-predios-fachada-de-predio-com-jardim-danielnunespaisagismo-73875-proportional-height_cover_medium.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "Residencial",
"value": "+557199999-9999"
}
]
},
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "email",
"path": "",
"parameters": [
{
"title": "",
"value": "a@a.com"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#FFF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "http://webluxo.com.br/home/wp-content/uploads/2015/11/predio-ecologioco-cairo-9.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "querystring",
"value": "+557199999-9999"
}
]
}
]
},
{
"publishLevel": 1,
"permissionLevel": 1,
"background": "#FFF",
"color": "#EE8113",
"details": [
{
"order": 0,
"value": "https://br.habcdn.com/files/dynamic_content/realizar-projeto-e-construir-predio-comercial-com-salas-no-1714664_gallery.jpg"
},
{
"order": 1,
"value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"parameters": [
{
"title": "querystring",
"value": "+557199999-9999"
}
]
}
]
}
]
}
]
},
{
"order": 3,
"background": "#fff",
"title": "Formatação",
"totalPages": 1,
"currentPage": 1,
"hasGroupBy": false,
"groupList": [
{
"template": "B",
"title": "ELEMENTOS",
"background": "#efefef",
"color": "#482073",
"itemsList": [
{
"details": [
{
"order": 0,
"value": "\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<h2 class='text-default'>ELEMENTOS PARA TEXTOS</h2>\r\n\t\t\t\t\t\t<br><br>\r\n\t\t\t\t\t\t<table style='width:99%;' >\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>span</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span>Lorem ipsum</span></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>h3</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><h3>Lorem ipsum</h3></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>h2</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><h2>Lorem ipsum</h2></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>h1</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><h1>Lorem ipsum</h1></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>Ícone</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><i class='icon-medium'> </i></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>Imagem</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><img src='http://www.sclance.com/pngs/divider-png/divider_png_398260.png' style='width:100%;height:70px'/></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t</table>\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<br><br><h2 class='text-default'>TABELAS</h2>\r\n\t\t\t\t\t\t<br><br>\r\n\t\t\t\t\t\t<table style='width:99%;border:1px solid #ccc;background-color:#efefef;'>\r\n\t\t\t\t\t\t\t<tr><td width='80%' align='left' style='border-right:1px solid #ccc;background-color:#efefef;'>Lorem ipsum</td>\r\n\t\t\t\t\t\t\t\t<td width='20%'align='center'><i class='icon-small'></i></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t</table> \t\t\t\t\t\r\n\t\t\t\t\t\t<br><br>\r\n\t\t\t\t\t\t<table style='width:99%;border:1px solid #ccc;'>\r\n\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t<td style='border-right:1px solid #ccc;background-color:#efefef;' width='20%' align='center' valign='middle'><i class='icon-small'></i></td>\r\n\t\t\t\t\t\t\t\t<td width='80%'align='left'>Lorem ipsum</td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t</table>\r\n\t\t\t\t\t\t<br><br>\r\n\t\t\t\t\t\t<table style='width:99%;border:1px solid #ccc;'>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;background-color:#efefef;' width='100%' align='center' valign='middle'><i class='icon-small'></i> Lorem ipsum</td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t</table>\r\n\t\t\t\t\t\t<br>\r\n\r\n\t\t\t\t\t\t<br><br><h2 class='text-default'>ESTILOS PARA TEXTOS </h2>\r\n\t\t\t\t\t\t<br><br>\r\n\t\t\t\t\t\t<table style='width:99%;' >\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>text-default</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span class='text-default' style='margin:0'>Lorem ipsum</span></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>text-blue</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span class='text-blue' style='margin:0'>Lorem ipsum</span></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>text-red</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span class='text-red' style='margin:0'>Lorem ipsum</span></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>text-gray</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span class='text-gray' style='margin:0'>Lorem ipsum</span></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>text-black</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span class='text-black' style='margin:0'>Lorem </span></td>\r\n\t\t\t\t\t\t\t</tr> \r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>text-green</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span class='text-green' style='margin:0'>Lorem ipsum</span></td>\r\n\t\t\t\t\t\t\t</tr> \r\n\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>text-purple</td>\r\n\t\t\t\t\t\t\t\t<td width='60%' align='left' ><span class='text-purple' style='margin:0'>Lorem ipsum</span></td>\r\n\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t</table>\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<br><br><h2 class='text-default'>ESTILOS PARA ÍCONES </h2><br><br>\r\n\t\t\t\t\t\t<table style='width:99%;' >\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>icon-small</td>\r\n\t\t\t\t\t\t\t\t\t<td width='60%' align='left' ><i class='icon-small' style='margin:0;'> </i></td>\r\n\t\t\t\t\t\t\t\t</tr>\t\r\n\t\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>icon-medium</td>\r\n\t\t\t\t\t\t\t\t\t<td width='60%' align='left' ><i class='icon-medium' style='margin:0'> </i></td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>icon-large</td>\r\n\t\t\t\t\t\t\t\t\t<td width='60%' align='left' ><i class='icon-large' style='margin:0'> </i></td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\t<tr><td style='border-right:1px solid #ccc;' width='30%' align='left' valign='middle'>icon-xlarge</td>\r\n\t\t\t\t\t\t\t\t\t<td width='60%' align='left' ><i class='icon-xlarge' style='margin:0'> </i></td>\r\n\t\t\t\t\t\t\t\t</tr>\t\r\n\t\t\t\t\t\t\t</table>\r\n\r\n\t\t\t\t\t\t\t<br><br><h2 class='text-default'>ESTILOS CORES DE TABELAS </h2>\r\n\t\t\t\t\t\t\t<br>\r\n\t\t\t\t\t\t\t<br><table style='width:90%;' class='btn'><tr><td width='80%' align='center'> <span> btn </span> </td></tr></table>\r\n\t\t\t\t\t\t\t<br><table style='width:90%;' class='btn btn-default'>\t<tr><td width='80%' align='center'> btn btn-default </td></tr></table>\r\n\t\t\t\t\t\t\t<br><table style='width:90%;' class='btn btn-blue'>\t<tr><td width='80%' align='center'> btn btn-blue </td></tr></table>\r\n\t\t\t\t\t\t\t<br><table style='width:90%;' class='btn btn-red'>\t\t<tr><td width='80%' align='center'> btn btn-red </td></tr></table>\r\n\t\t\t\t\t\t\t<br><table style='width:90%;' class='btn btn-gray'>\t<tr><td width='80%' align='center'> btn btn-gray </td></tr></table>\r\n\t\t\t\t\t\t\t<br><table style='width:90%;' class='btn btn-green'>\t<tr><td width='80%' align='center'> btn btn-green </td></tr></table>\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t<br><br><h2 class='text-default'>ESTILOS PARA ESPAÇAMENTOS EM TABELAS </h2>\r\n\t\t\t\t\t\t\t<br><br><table style='width:99%;background-color:#CCC;'>\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td style='width:100%;border:1px solid #666;' class='padding-small' align='center' valign='middle'>\r\n\t\t\t\t\t\t\t\t\t\t padding-small\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td style='width:100%;border:1px solid #666;' class='padding-medium' align='center' valign='middle'>\r\n\t\t\t\t\t\t\t\t\t\tpadding-medium\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td style='width:100%;border:1px solid #666;' class='padding-large' align='center' valign='middle'> padding-large</td>\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t</table>\r\n\t\t\t\t\t\t\t<br>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t"
}
]
}
]
}
]
}
]
}
}