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