ページリンクでページに設定したカバー画像を一覧にも表示したい場合のサンプルです。
上下のボーダーをページリンクが隣接している場合には片方しか出さないようにしています。
長めのタイトル長めのタイトル長めのタイトル長めのタイトル長めのタイトル長めのタイトル
.notion-page-link {
display: flex;
align-items: flex-start;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
padding: 1em 0 1em;
margin: 0 0 1em;
height: auto;
overflow: hidden;
}
.notion-page-title {
align-items: flex-start;
}
.notion-page-title-text {
border: none;
white-space: break-spaces;
line-height: 1.5em;
}
.notion-page-link:hover {
background-color: transparent;
opacity: 0.75;
}
.notion-page-link + .notion-page-link {
padding-top: 0;
border-top: none;
}
.notion-page-link svg {
display: none;
}
.notion-page-link-titleArea {
flex: 1;
}
.notion-page-link-cover,
.notion-list-item-cover {
display: block;
width: 40%;
min-height: 70px;
max-height: 120px;
border-radius: 4px;
margin-right: 1em;
object-fit: cover;
object-position: top;
}