Custom reusable components

Community Resources
1

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 driven by this community)

image

<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

<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>
8 Likes
2

I want to continue crafting custom components so i’m going to collect them all in my Notion library, so you’re welcome to bookmark it)

7 Likes
3

Thanks for sharing! These looks nice.

1 Like
4

Thanks!

1 Like
5

New component arrived to library!)

image
image433×642 60.6 KB

13 Likes
6

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

1 Like
7

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

8

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

1 Like
9

Amazing your custom code ! Really like it !

3 Likes
10

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

11

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

Pages need slightly different approach to build custom components.

12

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?

13

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

14

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

2 Likes