# Reusable Elements Summary

## admin\_edit\_user

This reusable element allows admin Users to edit, or delete, User accounts from the application.

**Editor:**

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXSUff4MRjblDGu0Ebk%2F-LXSVBVoqHBsvcIK_5LN%2Fimage.png?alt=media\&token=93a23a41-b7e2-4932-9337-e524f70f6722)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXSUff4MRjblDGu0Ebk%2F-LXSVI8ehL2AW-VOu8wn%2Fimage.png?alt=media\&token=50130287-6cde-4e9b-85ee-d48a5c7ba31c)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXSUff4MRjblDGu0Ebk%2F-LXSVMSbrUk_0pK5BQ1E%2Fimage.png?alt=media\&token=c2c48483-78d1-4892-92ea-bfa07b6e9c79)

## desktop navigation

This reusable element is used on the "logged-in" pages to allow Users to change pages.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXby6cdK1StkaNJaFvk%2Fimage.png?alt=media\&token=77f15861-f9a9-4da1-9b72-80e9fb51e780)

## follow button

This reusable element allows Users to follow/unfollow other Users.

#### Editor:&#x20;

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC6JFq2Qepitab7KQR%2F-LGC78h4FCgnhBvcupsV%2Fimage.png?alt=media\&token=a4e28b74-27d8-4429-9c1b-afc497550d1d)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC6JFq2Qepitab7KQR%2F-LGC7GNhx0dxxSh_LbQY%2Fimage.png?alt=media\&token=a8a4f382-6bfc-4ab7-8f7b-d97f43c0f3b4)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC6JFq2Qepitab7KQR%2F-LGC7LVJqAMh7pmsnAMO%2Fimage.png?alt=media\&token=0a6530b7-609e-4591-a9a7-12cc464a2d40)

## footer

This reusable element is used to display the application's footer.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC6JFq2Qepitab7KQR%2F-LGC7RhLNOkikRqnPIAE%2Fimage.png?alt=media\&token=750e5ff5-de67-4295-b9f7-2fe5b89dc29c)

## header\_logo\_only

This reusable element is used on pages that we don't want Users to navigate away from (e.g., reset\_pw, change\_pass, onboard).&#x20;

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC6JFq2Qepitab7KQR%2F-LGC7akwRMoTs8oz9xNw%2Fimage.png?alt=media\&token=db5fce66-a587-4106-be23-f883992f1ae2)

## header\_navigation

This reusable element is used on the confirm, contact, landing, privacy policy, resources, terms, and z\_layout\_no\_sidebar pages.

#### Editor:

![This Group Logged Out element is within the header\_navigation reusable element.  It is shown when the Current User isn't logged in.  You can view this in the conditional formatting of the Group Logged Out element.](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY5k_F5qNR1kUL4XwJa%2F-LY5ko5uJfyHq2HFNzLQ%2Fimage.png?alt=media\&token=502b8271-2207-4d08-8dc0-4a8ca03c9c1d)

![This Group Logged In element is within the header\_navigation reusable element.  It is shown when the Current User is logged in.  You can view this in the conditional formatting of the Group Logged In element.](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY5k_F5qNR1kUL4XwJa%2F-LY5kzO-qjIAVsdC72fl%2Fimage.png?alt=media\&token=e3c42bea-5c75-44a1-8f90-92cd8d6071de)

{% hint style="info" %}
The`Icon Show Mobile Menu (Logged In)` element within the `Group Logged In` element is hidden on page load, and becomes visible when the current page width is less than or equal to 800 pixels. You can view this in the conditional formatting of that element.&#x20;

<img src="https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY5mOCpU0uqZFB_QSS5%2F-LY5mSTw5WXJ2C1BF1T3%2FMobileMenuConditional.png?alt=media&#x26;token=807e4beb-fee7-4201-b4bb-086d404ca110" alt="" data-size="original">&#x20;
{% endhint %}

![The "login / signup popup" reusable element is within this header\_navigation reusable element.  The header\_navigation's "Button Sign Up" and "Group Login Button" elements have workflows, which when clicked-- will change the "mode" custom state of this login / signup popup, and show the popup to the User with the appropriate form.](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXbynYd6os9RzOJf-Nb%2Fimage.png?alt=media\&token=54c018fa-7d5f-4875-9643-6a75cad36b6a)

## header\_navigation\_demo

{% hint style="info" %}
This reusable element was only needed for the template's demo functionality.  You don't need it; please delete it.&#x20;
{% endhint %}

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY0vaoxpQ6vNatFvhZ2%2F-LY0vf2f__Rl4DHNzcUg%2Fimage.png?alt=media\&token=288ae291-c024-4c3b-8825-f4f7dab0441f)

## image previewer

This reusable element is shown when the Current User is zooming in on one image.&#x20;

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGC9eSNWuyXAG3Rc4GL%2Fimage.png?alt=media\&token=ca8a3209-af46-4d6b-94bc-97cc1a6f9038)

## login / signup popup

This reusable element is contained within the `header_navigation` reusable element, to allow Users to login and signup. It ensures that new Users' passwords meet the application's password policy when signing up. It also allows the Current User to request a password reset email.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXbz2yeEvWhF0LmrCZ3%2Fimage.png?alt=media\&token=02d7bfe1-e96d-42c7-98f6-d84f307c401d)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGCENMffjFtlpJKST71%2F-LGCESDVjjZ19AGNEJhH%2Fimage.png?alt=media\&token=76f99f52-8cdb-408a-a18b-f79cc93fb203)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCAN1C7pbQpHtiSonO%2Fimage.png?alt=media\&token=d4c57761-4616-41b1-a22a-f328487a69bb)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCARuhPkE8T3-dmJP_%2Fimage.png?alt=media\&token=9d7f3ada-dce8-4e81-9a14-0fa9be8ab55d)

<br>

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCB7K7sE1IONT4UuL-%2Fimage.png?alt=media\&token=76d360c9-4dd2-417b-8081-6f5cdaeb4b0a)

## logo (blue)

The blue version of your logo.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCBC6b7zhue-ePNkbA%2Fimage.png?alt=media\&token=d8f69863-be7b-4f86-80e3-eeb84e235541)

## logo (grey)

The grey version of your logo.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCBGY_nWfMe5XDSFmV%2Fimage.png?alt=media\&token=a9b8ba9a-2d0d-4cec-baef-2e07b27e3a44)

## logo (white)

The white version of your logo.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCBKmWbxedHjDrxhhu%2Fimage.png?alt=media\&token=7f7879b1-5c81-46c9-b0f8-990f16f0b5d4)

## mobile header

The mobile header element that is shown on most of the "logged in" pages of the application, when the current page width is less than 887 pixels.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCBR2rHZpz4EDOS3-7%2Fimage.png?alt=media\&token=ccbcc81b-cf30-4a2d-960b-8d385a3eeea4)

## mobile menu (list)

The mobile menu of the application.  This reusable element is within the `FG - Mobile Menu` elements on the application's pages.

#### Editor:

![Logged In](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXbzEiHvDu14JqA50wX%2Fimage.png?alt=media\&token=95757358-e77e-439c-abe7-4965e44e1351)

![Logged Out](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXbzMD5bBG8aQRyXP0Q%2Fimage.png?alt=media\&token=1b9f3ee8-59e7-49ff-ba1d-9fd2afbe5cb8)

## mobile submenu

The 'icons' mobile menu of the application.  This reusable element is shown beneath the `mobile header` reusable element, on most of the "logged-in" pages, when the current page width is less than 887 pixels. Customize these icons to navigate to other pages.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY6QmWiI3lDGFwfjPQM%2F-LY6Qv9OtgKr8XLYlX6J%2Fimage.png?alt=media\&token=4b134d21-50df-4ac6-b80b-7e2d3d4163d8)

{% hint style="info" %}
There are transparent link elements on top of the Ionic icons.  To select the icons underneath the transparent link elements, click on a transparent link element and use the keyboard shortcut **Command + Click** to select the underneath icon. This saves a ton of time so you won't need to manually move or show/hide elements in order to select the elements underneath.
{% endhint %}

## user picture/dropdown

This reusable element is used on the "logged-in" pages of the application, in the top-right corner of each page.  It is also contained within the mobile header reusable element to allow the Current User to easily navigate to their profile page, account page, or logout of the application.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCDMw5-DmE8kHvLyw1%2Fimage.png?alt=media\&token=44330f3d-c789-47f1-a2a9-780d1836f00b)

## user\_row

This reusable element element is shown in certain popups to display Users profile pictures and full names.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LGC9ckzIe6c8s4gglbL%2F-LGCDRix42FWKnGRAHOz%2Fimage.png?alt=media\&token=5044352d-9fe0-4dfe-ba3a-e42eac9255d3)

#### Preview Example:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LWDebN2HKy-yvnYISpq%2F-LWDfh9SGFyIEoEtVO5x%2Fuserrow.png?alt=media\&token=8daf871e-02b3-450e-8af3-2a4884c2b9d4)

## Usercard (inside Group)

This reusable groupfocus element is shown when certain profile picture elements are hovered.&#x20;

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXc-E6Vv1NB1V1_fhxN%2Fimage.png?alt=media\&token=53d4887e-5232-45e6-9c85-4a9eab2ee71b)

#### Preview Example:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXc-SqVdMvY91QklXv_%2Fimage.png?alt=media\&token=55529e7a-978d-4d7e-9d3c-ea0a0857f243)

## userimage (20px by 20 px) and usercard

This element is currently not used on any pages, but it may be helpful when building new pages. It's used to show more information on the hovered User.

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXc-YUTsSS7KPl9IMWn%2Fimage.png?alt=media\&token=74974e70-f213-4977-91a4-f4f44f9ed83e)

#### Preview Example:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LWDebN2HKy-yvnYISpq%2F-LWDf55F4499R_V6a33F%2FUsercard20.png?alt=media\&token=6d24a94b-60c0-4e3f-ad8d-9cbdfd9e7385)

## userimage (40px by 40px) and usercard

This is a larger version of the `userimage (20px by 20px) and usercard` reusable element, to show more information about the hovered User.&#x20;

#### Editor:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXc-uTVfFgVBM7TXNPI%2Fimage.png?alt=media\&token=4453d3dc-81e4-49e4-991c-aa6a14592c44)

#### Preview Example:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LXbxl7DIOjoLaiUqhNr%2F-LXc-z_U-hG1S9ZIcHAx%2Fimage.png?alt=media\&token=c7ffc3cd-cf83-4a7e-b525-c240ae22faa3)
