{"id":283,"date":"2023-11-06T12:35:37","date_gmt":"2023-11-06T12:35:37","guid":{"rendered":"http:\/\/wetaccel.com\/?page_id=283"},"modified":"2023-11-06T12:50:12","modified_gmt":"2023-11-06T12:50:12","slug":"components","status":"publish","type":"page","link":"https:\/\/wetaccel.com\/index.php\/documentation\/components\/","title":{"rendered":"Components"},"content":{"rendered":"\n<h1 class=\"wp-block-heading has-text-align-center has-huge-font-size\" id=\"wetaccel-enterprise-grade-django-template-for-government-of-canadas-web-initiatives\">WETAccel: Enterprise-Grade Django Template for Government of Canada&#8217;s Web Initiatives<\/h1>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"table-of-contents\">Table of Contents<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/wetaccel.com\/index.php\/documentation\/templates\/\" data-type=\"page\" data-id=\"281\">Templates<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/wetaccel.com\/index.php\/documentation\/components\/\" data-type=\"page\" data-id=\"283\">Components<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/wetaccel.com\/index.php\/documentation\/views\/\" data-type=\"page\" data-id=\"288\">Views<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/wetaccel.com\/index.php\/documentation\/urls\/\" data-type=\"page\" data-id=\"286\">URLS<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"1-app-container\">1. App Container<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"class-app-container\">Class:&nbsp;<code>.app-container<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;The main container for your application, offering a consistent layout structure. Centralizes content and provides consistent padding.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>max-width<\/code>: defined by the container standard.<\/li>\n\n\n\n<li><code>margin<\/code>: auto for horizontal centering.<\/li>\n\n\n\n<li><code>padding<\/code>: 12 units top and bottom, 4 units left and right on mobile and 0 units on medium and larger screens.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"2-app-card\">2. App Card<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"class-app-card\">Class:&nbsp;<code>.app-card<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A versatile card component ideal for displaying grouped content.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>border<\/code>: 1px solid with a neutral gray tone.<\/li>\n\n\n\n<li><code>border-radius<\/code>: medium rounded corners.<\/li>\n\n\n\n<li><code>padding<\/code>: 8 units on all sides.<\/li>\n\n\n\n<li><code>box-shadow<\/code>: inner shadow for depth.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"3-app-input\">3. App Input<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"selector-inputapp-input\">Selector:&nbsp;<code>input.app-input<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;An input field designed for user interactions.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>border<\/code>: 1px solid with a subtle gray shade.<\/li>\n\n\n\n<li><code>border-radius<\/code>: medium rounded corners.<\/li>\n\n\n\n<li><code>width<\/code>: 100% of the container.<\/li>\n\n\n\n<li><code>margin-bottom<\/code>: 4 units.<\/li>\n\n\n\n<li><code>padding<\/code>: 4 units left and right, 2 units top and bottom.<\/li>\n\n\n\n<li><code>box-shadow<\/code>: inner shadow for depth.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"4-app-button\">4. App Button<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"class-app-button\">Class:&nbsp;<code>.app-button<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A clickable button component, essential for user actions.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>padding<\/code>: 4 units on top and bottom, 2 units on left and right.<\/li>\n\n\n\n<li><code>border-radius<\/code>: medium rounded corners.<\/li>\n\n\n\n<li><code>font-color<\/code>: white.<\/li>\n\n\n\n<li><code>border<\/code>: 2px solid with a distinct color shade.<\/li>\n\n\n\n<li><code>background-color<\/code>: #2572b4.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"5-app-section-heading\">5. App Section Heading<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"class-app-section-heading\">Class:&nbsp;<code>.app-section-heading<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A prominent heading for distinguishing different sections.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>font-size<\/code>: 3 times the base size.<\/li>\n\n\n\n<li><code>font-weight<\/code>: bold.<\/li>\n\n\n\n<li><code>margin-bottom<\/code>: 4 units.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"6-app-input-container\">6. App Input Container<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"class-app-input-container\">Class:&nbsp;<code>.app-input-container<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A container tailored for input fields.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>margin-bottom<\/code>: 1 unit.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"7-app-input-label\">7. App Input Label<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"class-app-input-label\">Class:&nbsp;<code>.app-input-label<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A label associated with input fields.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>display<\/code>: block.<\/li>\n\n\n\n<li><code>font-size<\/code>: slightly larger than the base size.<\/li>\n\n\n\n<li><code>font-weight<\/code>: medium.<\/li>\n\n\n\n<li><code>margin-bottom<\/code>: 2 units.<\/li>\n\n\n\n<li><code>color<\/code>: dark gray (#1A202C).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"8-messages\">8. Messages<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"selector-messages-li\">Selector:&nbsp;<code>.messages li<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A list item for displaying messages.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>padding<\/code>: 4 units on top and bottom, 2 units on left and right.<\/li>\n\n\n\n<li><code>border-radius<\/code>: medium rounded corners.<\/li>\n\n\n\n<li><code>margin-bottom<\/code>: 4 units.<\/li>\n\n\n\n<li><code>border<\/code>: 1px solid.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"variant-messages-lisuccess\">Variant:&nbsp;<code>.messages li.success<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A success variant of the message list item.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>font-color<\/code>: green (#38A169).<\/li>\n\n\n\n<li><code>background-color<\/code>: light green (#F0FFF4).<\/li>\n\n\n\n<li><code>border<\/code>: 1px solid green.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"variant-messages-lierror\">Variant:&nbsp;<code>.messages li.error<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;An error variant of the message list item.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>font-color<\/code>: red (#E53E3E).<\/li>\n\n\n\n<li><code>background-color<\/code>: light red (#FED7D7).<\/li>\n\n\n\n<li><code>border<\/code>: 1px solid red.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"9-menu-animation\">9. Menu Animation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"class-menu\">Class:&nbsp;<code>.menu<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description:<\/strong>&nbsp;A menu with a transition effect.<\/li>\n\n\n\n<li><strong>Properties:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>transition<\/code>: max-height changes over 0.4s with ease-in-out timing.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>WETAccel: Enterprise-Grade Django Template for Government of Canada&#8217;s Web Initiatives Table of Contents 1. App Container Class:&nbsp;.app-container 2. App Card Class:&nbsp;.app-card 3. App Input Selector:&nbsp;input.app-input 4. App Button Class:&nbsp;.app-button 5. App Section Heading Class:&nbsp;.app-section-heading 6. App Input Container Class:&nbsp;.app-input-container 7. App Input Label Class:&nbsp;.app-input-label 8. Messages Selector:&nbsp;.messages li Variant:&nbsp;.messages li.success Variant:&nbsp;.messages li.error 9. Menu Animation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":278,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"hide_page_title":"enabled","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uag_custom_page_level_css":"","_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"class_list":["post-283","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/wetaccel.com\/index.php\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"WETAccel: Enterprise-Grade Django Template for Government of Canada&#8217;s Web Initiatives Table of Contents 1. App Container Class:&nbsp;.app-container 2. App Card Class:&nbsp;.app-card 3. App Input Selector:&nbsp;input.app-input 4. App Button Class:&nbsp;.app-button 5. App Section Heading Class:&nbsp;.app-section-heading 6. App Input Container Class:&nbsp;.app-input-container 7. App Input Label Class:&nbsp;.app-input-label 8. Messages Selector:&nbsp;.messages li Variant:&nbsp;.messages li.success Variant:&nbsp;.messages li.error 9. Menu Animation&hellip;","_links":{"self":[{"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/pages\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":3,"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/pages\/283\/revisions"}],"predecessor-version":[{"id":291,"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/pages\/283\/revisions\/291"}],"up":[{"embeddable":true,"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/pages\/278"}],"wp:attachment":[{"href":"https:\/\/wetaccel.com\/index.php\/wp-json\/wp\/v2\/media?parent=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}