# Custom reusable components

**URL:** <https://community.glideapps.com/t/custom-reusable-components/38163>\
**Category:** Community Resources\
**Created:** [February 5, 2022, 4:51pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163 "2022-02-05T16:51:52Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [February 5, 2022, 4:51pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163/1 "2022-02-05T16:51:52Z")

</div>

I’d like to introduce custom components made by my own)  
You can grab them and use in your apps. Tested on both iOS & Android devices (mobile-only), works well. Just copy-paste the code below into Template column and configure replacements. Code is commented so you’ll quickly find dummy data to replace. You also can play with code if you want, make sure to share your experiments)

Don’t forget that you can easily attach actions to them because Rich Text component allows it.

**1. Custom personal section**  
(grey divider taken from [CSS library](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2) driven by this community)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/3/d35727ff7e6321297e340ea55041ae306db1dc66.png)

```auto
<div class="personal-section">
    <div class="profile-picture"></div>
    <div class="text-section">
        <div class="heading-plus-icon">
<!-------↓Replace Text data here↓-----!>
            <p class="user-name"><strong>John Doe</strong></p>
            <div class="action-icon"></div>
        </div>
<!-------↓Replace Text data here↓-----!>
        <p class="second-line">Some additional info</p>
    </div>

<style>

/*=======↓Replace image URLs here↓=======*/
:root {
    --profilePicture: url(https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1476&q=80);
}

.personal-section {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.profile-picture {
    width: 80px;
    height: 80px;
    background-image: var(--profilePicture);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    position: relative;
}

.profile-picture::before {
    content: "";
    position: absolute;
    z-index: -1;
    height: 100%;
    top: 4px;
    left: 2px;
    right: 2px;
    background-image: var(--profilePicture);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    filter: blur(6px);
    opacity: 0.8;
}

.text-section {
    flex-grow: 1;
}

.heading-plus-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-name {
    margin-bottom: 0 !important;
}

.action-icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

/*=======↓Replace icon URL here↓=======*/
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAT9JREFUaEPtldFtg0AQRG8FfMclkA6cPg7ZdOJUEndCjOjDlOB0YH9zaCOifCCEg0/jVWR5+L2dvZs3d4u4B//kwc/vaOC/E2QCTAAkwCsEAoTlTABGCDZgAiBAWM4EYIRgAyYAAoTlTABGCDZ4jgSqqsrTNP0QkfUATFXbEMJ7WZanOYDW9eM9FxP4PczRObeaHPYcQnibmrCunwJbNNA0zaeqbuZIi8jBe78dr1nXRxuo6/osIi9XDJy896/jNev6uxpwzn0VRZHfauAe9dEGrK9EbP9oA8OjTJKknV4jVb30fb+ee8SW9dEGBsFgIsuyvar+jFERabuu2/01Ri3ro8Yo+KM0ly+OUfMTgBvQAAgQljMBGCHYgAmAAGE5E4ARgg2YAAgQljMBGCHYgAmAAGE5E4ARgg2YAAgQln8DLvjVMaTZcIIAAAAASUVORK5CYII=);
}

.second-line {
    color: grey;
    font-size: 14px !important;
}

</style>

```

**2. Custom Details Screen Title**

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/b/4b40c2c1bc3eeeb73e61f89ceb46e7f5943da58a.jpeg)

```auto
<div class="cover-image"></div>
<div class="info-section">
    <div class="av-image"></div>
    <div class="info-text-section">
<!-------↓Replace Text data here↓-----!>
        <h3 class="info-title">Screen Title</h3>
        <p class="info-description">Some additional information</p>
    </div>
</div>

<style>

/*=======↓Replace image URLs here↓=======*/
:root {
    --coverImage: url(https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80);
    --circleImage: url(https://globalmileage.com/media/1616995674phpU3nouz.png);
}

.cover-image {
    height: 160px;
    background-image: var(--coverImage);
    background-position: center;
    background-size: cover;
    border-radius: 24px;
    position: relative;
}

.info-section {
    padding: 0 24px;
    margin-top: -80px;
    position: relative;
    z-index: 1;
}

.av-image {
    width: 110px;
    height: 110px;
    background-image: var(--circleImage);
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    border: 8px solid white;
    margin-left: -8px;
}

.info-title {
    margin-bottom: 4px !important;
}

.info-description {
    color: #a3a3a3;
    font-size: 14px !important;
}

</style>

```

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [February 5, 2022, 5:16pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163/2 "2022-02-05T17:16:31Z")

</div>

I want to continue crafting custom components so i’m going to collect them all in my [Notion library](https://igapeka.notion.site/1e7542458c3c44d6bceffa6700aa8de2?v=990cd80dc6d44b7f8449e5d6e6b34a7c), so you’re welcome to bookmark it)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 6, 2022, 12:35am UTC](https://community.glideapps.com/t/custom-reusable-components/38163/3 "2022-02-06T00:35:37Z")

</div>

Thanks for sharing! These looks nice.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [February 6, 2022, 2:12am UTC](https://community.glideapps.com/t/custom-reusable-components/38163/4 "2022-02-06T02:12:46Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [February 20, 2022, 1:45am UTC](https://community.glideapps.com/t/custom-reusable-components/38163/5 "2022-02-20T01:45:52Z")

</div>

New component arrived to library!)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/dac1b9bbdc0d3c5079a232292056b9801da370fa.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 21, 2022, 12:44am UTC](https://community.glideapps.com/t/custom-reusable-components/38163/6 "2022-02-21T00:44:41Z")

</div>

Amazing! Do you want to add these to the community’s CSS library?

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [February 21, 2022, 8:01am UTC](https://community.glideapps.com/t/custom-reusable-components/38163/7 "2022-02-21T08:01:45Z")

</div>

I could. Does everyone have permissions to add items to library?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 21, 2022, 8:54am UTC](https://community.glideapps.com/t/custom-reusable-components/38163/8 "2022-02-21T08:54:55Z")

</div>

No, please send me your email in personal messages so that I can add you as a contributor.

---

<div class="post-metadata">

**Author:** ![Aymeric\_de\_Maussion](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymeric_de_maussion/32/29505_2.png) [@Aymeric\_de\_Maussion](https://community.glideapps.com/u/Aymeric_de_Maussion)\
**Post date:** [February 21, 2022, 9:22am UTC](https://community.glideapps.com/t/custom-reusable-components/38163/9 "2022-02-21T09:22:28Z")

</div>

Amazing your custom code ! Really like it !

---

<div class="post-metadata">

**Author:** ![maherb86](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@maherb86](https://community.glideapps.com/u/maherb86)\
**Post date:** [March 14, 2023, 12:07pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163/10 "2023-03-14T12:07:07Z")

</div>

Hello everyone. Do you know if these templates still working? I have copied the CSS code in a template column, but it does not work. Thanks for your help

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [March 14, 2023, 1:27pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163/11 "2023-03-14T13:27:06Z")

</div>

Unfortunately it won’t work in Pages. Only in Apps(

Pages need slightly different approach to build custom components.

---

<div class="post-metadata">

**Author:** ![maherb86](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@maherb86](https://community.glideapps.com/u/maherb86)\
**Post date:** [March 14, 2023, 1:45pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163/12 "2023-03-14T13:45:00Z")

</div>

Yes, I’m trying it in mobile app. I have copied the CSS code in a template column, but nothing happens with the layout. Is it limited to Pro or Business plans?

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [March 14, 2023, 1:49pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163/13 "2023-03-14T13:49:13Z")

</div>

Try putting that template column inside of a rich text component on the desired details screen.

---

<div class="post-metadata">

**Author:** ![maherb86](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@maherb86](https://community.glideapps.com/u/maherb86)\
**Post date:** [March 14, 2023, 2:16pm UTC](https://community.glideapps.com/t/custom-reusable-components/38163/14 "2023-03-14T14:16:25Z")

</div>

Yess. I forgot this. It works now. Thanks!