Bookmark card styling for Ghost 2.3
Our favourite open source NODE based publishing platform has had a crucial update the past year. It is now fully loaded with long awaited features that will catapult this lightweight CSM into the 2020 era. Features like an array of content cards, a new API engine and a totally new user experience in the backend. With this barrage of new features it is easy to overlook the simple stuff. What TMRW was really gunning for, and is not on the official features list, is the new bookmark card (or how to use it).
Result
The cards
Firstly, you have to update your Ghost install to the latest version. As per their request, add the CSS to your stylesheet (or make a new one).
The hack
To really make the embeds useful you can make use of the figure class. This allows you extra, and quite useful, styling.
figure.kg-bookmark-card {
border: 1px solid #292929;
margin-bottom: 20px;
margin-top: 20px;
}
Since the bookmark cards embed external meta data from the links you supply, the data is not easily manageable. This is where some creative styling comes in. In the example below we rely on the negatice character count to hide the title of our Instagram embed. Obivously, this would work differently for different titles.
.kg-bookmark-title {
text-indent: -16ch;
padding-right: 14px;
font-size: 18px;
}
Something extra
Additionaly it is advised to a a maxium width to the icon displayed in the footer to make it behave on different devices.
.kg-bookmark-icon {
max-width: 20px;
height: 20px;
margin-right: 8px;
padding-bottom: 2px;
vertical-align: bottom;
}
Code
Get the code from Github. View it raw or download the zip