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>
  <ul class="contact-social-list" role="list">
    <li>
      <a class="contact-social-link" href="#" aria-label="Instagram" rel="noopener noreferrer" target="_blank">
        <span class="contact-social-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></span>
        <span class="contact-social-label">Instagram</span>
      </a>
    </li>
    <li>
      <a class="contact-social-link" href="#" aria-label="Facebook" rel="noopener noreferrer" target="_blank">
        <span class="contact-social-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12.07h2.54V9.845c0-2.507 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562v1.875h2.773l-.443 2.89h-2.33v6.988C20.343 21.2 24 17.062 24 12.073z"/></svg></span>
        <span class="contact-social-label">Facebook</span>
      </a>
    </li>
  </ul>
</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": [
      {
        "label": "Instagram",
        "url": "#",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"/></svg>",
        "newTab": true
      },
      {
        "label": "Facebook",
        "url": "#",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12.07h2.54V9.845c0-2.507 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562v1.875h2.773l-.443 2.89h-2.33v6.988C20.343 21.2 24 17.062 24 12.073z\"/></svg>",
        "newTab": true
      }
    ]
  }
}