{
	"ds button contained": {
		"prefix": "ds button primer nivel lg",
		"body": "<button class='button button--contained button--primary button--lg'>$1</button>"
	},
	"button outline": {
		"prefix": "ds button segundo nivel lg",
		"body": "<button class='button button--outlined button--primary button--lg'>$1</button>"
	},
	"button text": {
		"prefix": "ds button tercer nivel lg",
		"body": "<button class='button button--text button--primary button--lg'>$1</button>"
	},
	"button search": {
		"prefix": "ds button search",
		"body": "<button class='button button--contained button--primary button--48 eva fs-3 eva-search p-0'>$1</button>"
	},
	"text 700": {
		"prefix": "ds text bold",
		"body": "<p class='font-bold_tbk'>$1</p>"
	},
	"text 500": {
		"prefix": "ds text medium",
		"body": "<p class='font-medium_tbk'>$1</p>"
	},
	"text 400": {
		"prefix": "ds text regular",
		"body": "<p class='font-regular_tbk'>$1</p>"
	},
	"text 300": {
		"prefix": "ds text light",
		"body": "<p class='font-light_tbk'>$1</p>"
	},
	"alert info 200": {
		"prefix": "ds alert info 200",
		"body": [
		  "<div class=\"alert alert--default alert--info-200 m-4\">",
		  "  <div class=\"row\">",
		  "    <div class=\"col-1\">",
		  "      <div class=\"alert__aside\">",
		  "        <div class=\"alert__figure\"><i class=\"eva fs-3 eva-alert-circle c-info__400\"></i></div>",
		  "      </div>",
		  "    </div>",
		  "    <div class=\"col-8 col-md-9\">",
		  "      <div class=\"alert__body font-regular_tbk c-info__400\"><strong>Title: </strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut temporibus, at amet corporis id asperiores.</div>",
		  "    </div>",
		  "    <div class=\"col-2\">",
		  "      <div class=\"alert__actions\"><button class=\"button button--contained button--info button--xs\">Info</button></div>",
		  "    </div>",
		  "  </div>",
		  "</div>"
		],
		"description": "alert info 200"
	},
	"alert success": {
		"prefix": "ds alert success",
		"body": [
		  "<div class=\"alert alert--default alert--success m-4\">",
		  "  <div class=\"row\">",
		  "    <div class=\"col-1\">",
		  "      <div class=\"alert__aside\">",
		  "        <div class=\"alert__figure\"><i class=\"eva fs-3 eva-alert-circle c-success__300\"></i></div>",
		  "      </div>",
		  "    </div>",
		  "    <div class=\"col-8 col-md-9\">",
		  "      <div class=\"alert__body font-regular_tbk\"><strong>Title: </strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut temporibus, at amet corporis id asperiores.</div>",
		  "    </div>",
		  "    <div class=\"col-3 col-md-2\">",
		  "      <div class=\"alert__actions\"><button class=\"button button--contained button--success button--xs\">Entiendo</button></div>",
		  "    </div>",
		  "  </div>",
		  "</div>"
		],
		"description": "alert success"
	},
	"alert warning": {
		"prefix": "ds alert warning",
		"body": [
		  "<div class=\"alert alert--default alert--warning m-4\">",
		  "  <div class=\"row\">",
		  "    <div class=\"col-1\">",
		  "      <div class=\"alert__aside\">",
		  "        <div class=\"alert__figure\"><i class=\"eva fs-3 eva-alert-triangle c-warning__400\"></i></div>",
		  "      </div>",
		  "    </div>",
		  "    <div class=\"col-8 col-md-9\">",
		  "      <div class=\"alert__body font-regular_tbk\"><strong>Title: </strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut temporibus, at amet corporis id asperiores.</div>",
		  "    </div>",
		  "    <div class=\"col-3 col-md-2\">",
		  "      <div class=\"alert__actions\"><button class=\"button button--contained button--warning button--xs\">Warning</button></div>",
		  "    </div>",
		  "  </div>",
		  "</div>"
		],
		"description": "alert warning"
	},
	"alert info": {
		"prefix": "ds alert info",
		"body": [
		  "<div class=\"alert alert--default alert--info m-4\">",
		  "  <div class=\"row\">",
		  "    <div class=\"col-1\">",
		  "      <div class=\"alert__aside\">",
		  "        <div class=\"alert__figure\"><i class=\"eva fs-3 eva-alert-circle c-basic-100\"></i></div>",
		  "      </div>",
		  "    </div>",
		  "    <div class=\"col-8 col-md-9\">",
		  "      <div class=\"alert__body font-regular_tbk\"><strong>Title: </strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut temporibus, at amet corporis id asperiores.</div>",
		  "    </div>",
		  "    <div class=\"col-3 col-md-2\">",
		  "      <div class=\"alert__actions\"><button class=\"button button--text button--info button--xs\">Entiendo</button></div>",
		  "    </div>",
		  "  </div>",
		  "</div>"
		],
		"description": "alert info"
	},
	"card imagen": {
		"prefix": "ds card imagen",
		"body": [
		  "<div class=\"card card--default\">",
		  "    <div class=\"card__aside\">",
		  "        <div class=\"card__figure\"><img class=\"w-50 mx-auto d-block\" src=\"https://picsum.photos/200/300?random=1\"></div>",
		  "    </div>",
		  "    <div class=\"card__header\">",
		  "        <h2 class=\"card__title padding-bottom-24\">Card Title</h2>",
		  "        <h3 class=\"card__subtitle padding-bottom-24\">Card Subtitle</h3>",
		  "    </div>",
		  "    <div class=\"card__body\">Lorem ipsum </div>",
		  "    <div class=\"card__footer mt-4\">",
		  "        <div class=\"card__actions\"><button class=\"button button--outlined button--primary button--md center__block\">Button</button></div>",
		  "    </div>",
		  "</div>"
		],
		"description": "card imagen"
    },
	"form of table": {
		"prefix": "ds form of table",
		"body": [
			"<div class=\"form-group d-flex flex-wrap line-row align-items-end\">",
			"    <div class=\"col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12\">",
			"        <label class=\"font-regular_tbk c-grey-200 fs-1\">Fecha</label>",
			"        <div class=\"button button--outlined button--default  button--md calendar\">",
			"            <tbk:calendar id=\"\" data=\"\" placeholder=''/>",
			"        </div>",
			"    </div>",
			"    <div class=\"col-lg-3 col-md-6 col-sm-6 col-xs-12\">",
			"        <label class=\"font-regular_tbk c-grey-200 fs-1\">Label</label>",
			"        <div class=\"tbk-select-custom\">",
			"            <tbk:select id=\"\" name=\"\" placeholder=\"\" data=\"\" firstOptionAsDefault=\"\" onclick=\"\">",
			"            </tbk:select>",
			"        </div>",
			"    </div>",
			"    <div class=\"col-lg-2 col-md-5 col-sm-5 col-xs-12 mt-lg-0 mt-md-4\">",
			"        <label class=\"font-regular_tbk c-grey-200 fs-1 d-flex align-items-center\">Label</label>",
			"        <div class=\"tbk-select-custom\">",
			"            <tbk:select id=\"\" name=\"\" placeholder=\"\" data=\"\" firstOptionAsDefault=\"\" onclick=\"\">",
			"            </tbk:select>",
			"        </div>",
			"    </div>",
			"    <div class=\"col-lg col-md-1 col-sm\">",
			"        <div>",
			"            <aui:button id=\"\" type=\"submit\" value=\"\" cssClass=\"button button--contained button--primary button--48 eva fs-3 eva-search p-0\" onclick=\"\">",
			"            </aui:button>",
			"        </div>",
			"    </div>",
			"    <div class=\"col-xl-3 col-lg-2 col-md-6 col-sm-5 pb-1\">",
			"        <div class=\"form-group form-group-select m-0\">",
			"            <div class=\"float-right disable-onload tbk-info__tooltip box-buton-abono\">",
			"                <a href=\"\" id=\"\" onclick=\"\" class=\"button button--outlined button--primary  button--sm disable-onload btn-with-icon d-flex align-items-center justify-content-center\" data-toggle=\"dropdown\">",
			"                    <i class=\"eva fs-3 eva-download pr-2\"></i> Descargar",
			"                </a>",
			"            </div>",
			"        </div>",
			"    </div>",
			"</div>"
		],
		"description": "formulario para grilla"
		}
	}
}