List B

Template B

Exemplo GroupList Template B
Propriedade
Descrição

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.

códio de exemplo de Template B
{
    "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": "[email protected]"
                                    }
                                ]
                            }
                        ],
                        "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": "[email protected]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "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": "[email protected]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "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": "[email protected]"
                                    }
                                ]
                            }
                        ],
                        "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": "[email protected]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "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": "[email protected]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "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": "[email protected]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "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'> &#xea88;</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'>&#xea88;</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'>&#xea88;</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'>&#xea88;</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;'> &#xea88;</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'> &#xea88;</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'> &#xea88;</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'> &#xea88;</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"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

Last updated