Custom reusable components

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

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

Thanks for sharing! These looks nice.

1 Like

Thanks!

1 Like

New component arrived to library!)

13 Likes

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

1 Like

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

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

1 Like

Amazing your custom code ! Really like it !

3 Likes

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

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

Pages need slightly different approach to build custom components.

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?

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

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

2 Likes