Contact Info Component

What it does

Renders a structured contact block with address, phone/email links, an optional CTA button, and social icon links. Works on both light (default) and dark backgrounds — the footer applies a dark-surface override via .footer .contact-info.

How to use


<div class="contact-info">

  <address class="contact-address"><span class="contact-name">Sternbergs Connemara</span><span class="contact-person">Peter und Alexandra Krämer</span><span class="contact-street">Hauptstraße 14</span><span class="contact-city">97529 Sulzheim-Vögnitz</span>
  </address>
  <ul class="contact-links" role="list">
    <li>
      <a class="contact-link" href="tel:+49 9382 123456">
        <span class="contact-link-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg></span>
        <span>+49 9382 123456</span>
      </a>
    </li>
    <li>
      <a class="contact-link" href="mailto:info@connemara-kraemer.de">
        <span class="contact-link-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></span>
        <span>info@connemara-kraemer.de</span>
      </a>
    </li>
  </ul>
  <a class="btn btn-small contact-cta" href="/index.php/kontakt">Kontakt aufnehmen</a>
  <ul class="contact-social-list" role="list">
    <li>
      <a class="contact-social-link"
         href="https://…"
         aria-label="Instagram" rel="noopener noreferrer" target="_blank">
        <span class="contact-social-icon" aria-hidden="true"><svg>…</svg></span>
        <span class="contact-social-label">Instagram</span>
      </a>
    </li>
  </ul>

</div>

All params are optional — omit any to hide that section.

Params reference

Param	Type	Description
`name`	`string`	Organisation name (bold)
`person`	`string`	Contact person
`street`	`string`	Street address
`postcode`	`string`	Postcode
`city`	`string`	City
`phone`	`string`	Phone number — renders as `tel:` link
`email`	`string`	Email address — renders as `mailto:` link
`ctaUrl`	`string`	CTA button href (omit to hide)
`ctaLabel`	`string`	CTA button label
`socialLinks.items`	`array`	`{ label, url, icon, newTab }` — `icon` is an inline SVG string

CSS class reference

Class	Element
`.contact-info`	Root `<div>`
`.contact-address`	`<address>` block
`.contact-name`	Organisation name `<span>`
`.contact-person`	Contact person `<span>`
`.contact-street`	Street `<span>`
`.contact-city`	Postcode + city `<span>`
`.contact-links`	Phone/email `<ul>`
`.contact-link`	Phone/email `<a>`
`.contact-link-icon`	Icon wrapper `<span>`
`.contact-cta`	CTA `<a>` (also `.btn.btn-small`)
`.contact-social-list`	Social links `<ul>`
`.contact-social-link`	Social link `<a>`
`.contact-social-icon`	SVG wrapper `<span>`
`.contact-social-label`	Platform label `<span>`

Theming

Light surface (default):

.contact-info {
  --contact-info-fg: var(--color-surface-neutral-fg);
  --contact-info-link-color: var(--text-interactive);
  --contact-info-social-icon-size: 1.5rem;
}

Dark surface override (applied automatically inside .footer):

.footer .contact-info {
  --contact-info-fg: var(--footer-fg);
  --contact-info-link-color: var(--footer-link-color);
}

SCSS partial

src/media/templates/site/jcrafts/scss/components/_contact-info.scss

HTML Code (Demo)

<div class="contact-info">
  <address class="contact-address"><span class="contact-name">Your Company Name</span><span class="contact-person">Jane Doe</span><span class="contact-street">123 Example Street</span><span class="contact-city">12345 City</span>
  </address>
  <ul class="contact-links" role="list">
    <li>
      <a class="contact-link" href="tel:+1 (555) 123-4567">
        <span class="contact-link-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg></span>
        <span>+1 (555) 123-4567</span>
      </a>
    </li>
    <li>
      <a class="contact-link" href="mailto:info@example.com">
        <span class="contact-link-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></span>
        <span>info@example.com</span>
      </a>
    </li>
  </ul>
  <a class="btn btn-small contact-cta" href="#">Get in touch</a>
</div>

Configuration

Component Config: Compositions/contact-info/contact-info.config.js

{
  "name": "Your Company Name",
  "person": "Jane Doe",
  "street": "123 Example Street",
  "postcode": "12345",
  "city": "City",
  "phone": "+1 (555) 123-4567",
  "email": "info@example.com",
  "ctaUrl": "#",
  "ctaLabel": "Get in touch",
  "socialLinks": {
    "items": []
  }
}

Contact Info - Address only