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>
5 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)

6 Likes

Thanks for sharing! These looks nice.

1 Like

Thanks!

1 Like

New component arrived to library!)

11 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