Was macht infocard?
Erstellen Sie redaktionelle Informationskarten mit HTML/CSS in Markdown. Bestens geeignet für Wissenszusammenfassungen, Daten-Highlights, Veranstaltungsankündigungen und einseitige Inhaltskarten mit Zeitschriftenqualität-Typografie.
Verwendung
Fügen Sie das folgende HTML-Markup in Ihre Markdown-Datei ein:
<div class="infocard">
<h3>Titel der Karte</h3>
<p>Ihr Inhalt hier. Dies kann Fließtext, Aufzählungspunkte oder sogar eingebettete Links enthalten.</p>
<p class="author">– Autor</p>
</div>
Styling
Das Styling wird inline oder über ein <style>-Tag im Markdown definiert, abhängig von der Unterstützung Ihres Markdown-Viewers. Beispiel-CSS:
<style>
.infocard {
background: #f9f9fb;
border-left: 4px solid #3b82f6;
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: 'Georgia', serif;
}
.infocard h3 {
margin-top: 0;
color: #1e293b;
}
.infocard .author {
text-align: right;
font-style: italic;
color: #64748b;
}
</style>
Optionale Anpassungen
- Ändern Sie die Farbe des linken Rands (
border-left-color), um sie an Ihr Branding anzupassen. - Passen Sie die Schriftarten (
font-family), Abstände oder Schatten an. - Fügen Sie weitere HTML-Elemente wie Listen oder Zitate hinzu.
Einschränkungen
- Nicht alle Markdown-Viewer unterstützen benutzerdefiniertes HTML/CSS. Testen Sie die Darstellung auf Ihrer Zielplattform.
- Für maximale Kompatibilität bleiben Sie bei einfachem HTML und vermeiden Sie JavaScript.
Lizenz
MIT