12 Karten & Boxen für Websites, die Inhalt ordentlich aussehen lassen.

Leistungen, Vorteile, Zahlen oder Referenzen lassen sich in Karten oft schneller erfassen als in einem langen Textblock. Entscheidend ist, dass die Form zum Inhalt passt.

Hier finden Sie zwölf unterschiedliche Beispiele – von ruhigen Leistungskarten bis zu Preis-, Referenz- und Zahlenboxen.

Gefällt Ihnen eine Variante, setzen Sie sie auf Ihren D/7 Merkzettel. So sehen wir später sofort, welche Art von Aufbau zu Ihrem Projekt passt. Wenn Sie selbst bauen, können Sie HTML und CSS direkt übernehmen.

D/7 K01

Einfache Leistungskarte

Gut für: Leistungen · Angebote · Übersichten

01 Webdesign

Neue Websites für Unternehmen, die klar zeigen sollen, was sie können.

Mehr erfahren

HTML & CSS für K01

HTML

<a href="#" class="d7-card-k01">
    <span class="d7-card-k01__number">01</span>
  <strong>Webdesign</strong>
  <p>Neue Websites für Unternehmen, die klar zeigen sollen, was sie können.</p>
  <span class="d7-card-k01__link">Mehr erfahren →</span>
</a>

CSS

.d7-card-k01 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 255px;
  padding: 28px;
  border: 1px solid #e3e7ef;
  border-radius: 22px;
  background: #fff;
  color: #172033;
  text-decoration: none;
}

.d7-card-k01__number {
  position: absolute;
  top: 20px;
  right: 24px;
  color: #edf0f8;
  font-size: 54px;
  font-weight: 600;
}

.d7-card-k01__link {
  margin-top: auto;
}

D/7 K02

Karte mit Icon

Gut für: Services · Funktionen · Themen

WordPress

Inhalte selbst pflegen und die Website später unkompliziert weiterentwickeln.

Mehr zu WordPress →

HTML & CSS für K02

HTML

<div class="d7-card-k02">

  <span class="d7-card-k02__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24">
      <rect x="4" y="4" width="16" height="16" rx="3"></rect>
      <path d="M8 9h8M8 13h5M8 17h7"></path>
    </svg>
  </span>

  <strong>WordPress</strong>

  <p>
    Inhalte selbst pflegen und die Website später
    unkompliziert weiterentwickeln.
  </p>

  <a href="#" class="d7-card-k02__link">
    Mehr zu WordPress →
  </a>

</div>

CSS

.d7-card-k02 {
  min-height: 235px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid #e1e5ed;
  border-radius: 16px;
  background: #fff;
}

.d7-card-k02__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 27px;
  border-radius: 13px;
  background: #e9edff;
  color: #4566d9;
}

.d7-card-k02__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d7-card-k02 strong {
  margin-bottom: 9px;
  color: #172033;
  font-size: 25px;
  font-weight: 400;
}

.d7-card-k02 p {
  margin: 0 0 20px;
  color: #697386;
  font-size: 13px;
  line-height: 1.5;
}

.d7-card-k02__link {
  margin-top: auto;
  color: #4566d9;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}

D/7 K03

Zahlenkarte

Gut für: Erfahrung · Kennzahlen · Vertrauen

400+ Webprojekte seit 2004

HTML & CSS für K03

HTML

<div class="d7-card-k03">
    <strong class="d7-card-k03__value">400+</strong>
  <span class="d7-card-k03__text">Webprojekte seit 2004</span>
</div>

CSS

.d7-card-k03 {
  min-height: 255px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  border-radius: 22px;
  background: #172033;
  color: #fff;
}

.d7-card-k03__value {
  font-size: 72px;
  line-height: .9;
  letter-spacing: -.06em;
}

D/7 K04

Vorteil mit Haken

Gut für: Vorteile · Argumente · Vertrauen

✓

Ihre Website gehört Ihnen.

Kein Mietmodell und keine unnötige Vertragsbindung.

HTML & CSS für K04

HTML

<div class="d7-card-k04">
  <span class="d7-card-k04__check">✓</span>
  <div>
    <strong>Ihre Website gehört Ihnen.</strong>
    <p>Kein Mietmodell und keine unnötige Vertragsbindung.</p>
      </div>
</div>

CSS

.d7-card-k04 {
  display: flex;
  gap: 20px;
  min-height: 190px;
  padding: 28px;
  border: 1px solid #e3e7ef;
  border-radius: 22px;
  background: #fff;
}

.d7-card-k04__check {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #e9edff;
  color: #4566d9;
}

D/7 K05

Referenzkarte

Gut für: Projekte · Referenzen · Portfolio

Neues Webprojekt Website ansehen →

HTML & CSS für K05

HTML

<div class="d7-card-k05">
  <div class="d7-card-k05__media">
    <span>D/7</span>
  </div>
  <div class="d7-card-k05__content">
    <span>dailyseven Referenz</span>
    <strong>Neues Webprojekt</strong>
    <a href="#">Website ansehen →</a>
  </div>
</div>

CSS

.d7-card-k05 {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
}

.d7-card-k05__media {
  height: 120px;
  padding: 22px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg,#172033,#4566d9);
}

.d7-card-k05__content {
  padding: 22px;
}

D/7 K06

Dunkle Karte

Gut für: Akzente · wichtige Aussagen · Kontraste

Seit 2004.

Ein bisschen Erfahrung sammelt sich mit der Zeit dann doch an.

HTML & CSS für K06

HTML

<div class="d7-card-k06">
    <strong>Seit 2004.</strong>
  <p>Ein bisschen Erfahrung sammelt sich mit der Zeit dann doch an.</p>
  </div>

CSS

.d7-card-k06 {
  min-height: 255px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 22px;
  background: #172033;
  color: #fff;
}

.d7-card-k06 strong {
  margin-top: auto;
  font-size: 40px;
}

D/7 K07

Große Nummer im Hintergrund

Gut für: Prozesse · Leistungen · mehrere Schritte

07 Klare Struktur

Die Nummer ordnet ein, ohne den Inhalt zu überladen.

→

HTML & CSS für K07

HTML

<div class="d7-card-k07">
  <span class="d7-card-k07__bg">07</span>
    <strong>Klare Struktur</strong>
  <p>Die Nummer ordnet ein, ohne den Inhalt zu überladen.</p>
  <span class="d7-card-k07__arrow">→</span>
</div>

CSS

.d7-card-k07 {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  padding: 28px;
  border-radius: 22px;
  background: #fff;
}

.d7-card-k07__bg {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #edf0f8;
  font-size: 82px;
  font-weight: 600;
}

D/7 K08

Geteilte Karte

Gut für: Fakten · Leistungen · kurze Botschaften

Webdesign

Direkter Kontakt und kurze Wege.

20+ Jahre

HTML & CSS für K08

HTML

<div class="d7-card-k08">
  <div class="d7-card-k08__left">
        <strong>Webdesign</strong>
    <p>Direkter Kontakt und kurze Wege.</p>
  </div>
  <div class="d7-card-k08__right">
    <strong>20+</strong>
    <span>Jahre</span>
  </div>
</div>

CSS

.d7-card-k08 {
  display: grid;
  grid-template-columns: 1.5fr .8fr;
  min-height: 220px;
  overflow: hidden;
  border-radius: 22px;
}

.d7-card-k08__left {
  padding: 28px;
  background: #fff;
}

.d7-card-k08__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: #4566d9;
  color: #fff;
}

D/7 K09

Karte für Kundenstimmen

Gut für: Bewertungen · Stimmen · kurze Zitate

„Hier kann eine kurze Kundenstimme stehen. Zwei oder drei Sätze reichen meistens völlig.“

HTML & CSS für K09

HTML

<div class="d7-card-k09">
  <blockquote>
    „Hier kann eine kurze Kundenstimme stehen.“
  </blockquote>
</div>

CSS

.d7-card-k09 {
  min-height: 255px;
  padding: 28px;
  border-radius: 22px;
  background: #f0f3ff;
}

.d7-card-k09 blockquote {
  margin: 28px 0;
  font-size: 21px;
  line-height: 1.4;
}

D/7 K10

Preisbox

Gut für: Pakete · Preise · Angebote

Website Start

ab 999 € netto

Webdesign · WordPress · responsive

Details ansehen →

HTML & CSS für K10

HTML

<div class="d7-card-k10">
  <h3>Website Start</h3>
  <div class="d7-card-k10__price">
    ab <strong>999 €</strong> <span>netto</span>
  </div>
  <p class="d7-card-k10__features">Webdesign · WordPress · responsive</p>
  <a href="#">Details ansehen →</a>
</div>

CSS

.d7-card-k10 {
  min-height: 285px;
  padding: 28px;
  border: 1px solid #dbe1ee;
  border-radius: 22px;
  background: #fff;
}

.d7-card-k10__price strong {
  font-size: 34px;
  font-weight: 500;
}

D/7 K11

Frage & Antwort

Gut für: FAQ · Hinweise · wichtige Informationen

Muss wirklich alles neu?

Nicht unbedingt. Bei dailyseven schauen wir zuerst, was von der bestehenden Website noch gut funktioniert.

Mehr erfahren →

HTML & CSS für K11

HTML

<div class="d7-card-k11">
    <strong>Muss wirklich alles neu?</strong>
  <p>
    Nicht unbedingt. Wir schauen zuerst,
    was von der bestehenden Website noch gut funktioniert.
  </p>
  <span class="d7-card-k11__more">Mehr erfahren →</span>
</div>

CSS

.d7-card-k11 {
  min-height: 255px;
  padding: 28px;
  border-left: 4px solid #4566d9;
  border-radius: 0 22px 22px 0;
  background: #fff;
}

D/7 K12

Die dailyseven Karte

Gut für: Leistungen · Navigation · Referenzen

12 Webdesign aus Berlin

Viel Weißraum, klare Typografie und ein kleiner Pfeil. Mehr braucht die Karte nicht.

→

HTML & CSS für K12

HTML

<a href="#" class="d7-card-k12">
  <span class="d7-card-k12__number">12</span>
    <strong>Webdesign aus Berlin</strong>
  <p>Viel Weißraum, klare Typografie und ein kleiner Pfeil.</p>
  <span class="d7-card-k12__arrow">→</span>
</a>

CSS

.d7-card-k12 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 255px;
  padding: 28px;
  border: 1px solid #dfe4ef;
  border-radius: 22px;
  background: #fff;
  color: #172033;
  text-decoration: none;
}

.d7-card-k12__number {
  position: absolute;
  top: 18px;
  right: 22px;
  color: #edf0f8;
  font-size: 68px;
  font-weight: 600;
}

.d7-card-k12__arrow {
  margin-top: auto;
  color: #4566d9;
}

D/7 Designbibliothek