Tangible Pattern Library

Callout: Default 

<div class="c-callout">
    <div class="grid vertical-center">

        <div class="c-callout__img-block 5@md" data-aos="fade-up-left">
            <img class="c-callout__img" src="https://picsum.photos/640/480" srcset="https://picsum.photos/640/480" sizes="100vw" alt="" />
        </div>

        <div class="c-callout__body 7@md" data-aos="fade-up">
            <div class="c-callout__title">Vuoi più informazioni su questo progetto o ne vuoi iniziare uno nuovo?</div>
            <div class="c-callout__actions">
                <div class="c-callout__action">
                    <a href="#" class="c-action c-action--brick">nicolo.volpato@tangible.is</a>
                </div>
            </div>
        </div>

    </div>
</div>
 
<div class="c-callout{% if modifier is defined %} {{ modifier }}{% endif %}">
  <div class="grid vertical-center">
    
    {# Image #}
    <div class="c-callout__img-block 5@md" data-aos="fade-up-left">
      <img class="c-callout__img"
          src="{{ image.src|default("") }}"
          srcset="{{ image.srcset|default("") }}"
          sizes="100vw"
          alt="{{ image.alt|default("") }}" />
    </div>
    
    {# Body #}
    <div class="c-callout__body 7@md" data-aos="fade-up">
      <div class="c-callout__title">{{ title }}</div>
      <div class="c-callout__actions">
        {% for item in actions %}
        <div class="c-callout__action">
          {%- set component = item.version|split('|') -%}
          {% include "@" ~ component[0] with {
            text: item.text,
            url: item.url,
            version: component[1]
          } %}
        </div>
        {% endfor %}
      </div>
    </div>

  </div>
</div>

{# 
0|1
0 refers to component
1 refers to version
 #}
 
{
  "image": {
    "src": "https://picsum.photos/640/480",
    "srcset": "https://picsum.photos/640/480",
    "alt": ""
  },
  "title": "Vuoi più informazioni su questo progetto o ne vuoi iniziare uno nuovo?",
  "actions": [
    {
      "text": "nicolo.volpato@tangible.is",
      "url": "#",
      "version": "link|brick"
    }
  ]
}
  • Content: 
    .c-callout {
  background-color: useHSL(--base-100);
  margin-top: spacing(space-96);
  margin-bottom: spacing(space-96);
}

.c-callout__img {
  width: 100%;
}

.c-callout__body {
  width: 100%;
  max-width: remify(745px);
  margin-left: auto;
  margin-right: auto;
}

.c-callout__title {
  @include font-scale(level-7, $font-primary, regular);
  color: useHSL(--primary-100);
  margin-bottom: spacing(space-24);
}

.c-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: spacing(space-24);
}

/*------------------------------------*
  Modifier: imageless
*------------------------------------*/
.c-callout--imageless {

  .c-callout__title {
    margin-bottom: spacing(space-56);
    text-align: center;
  }

  .c-callout__actions {
    justify-content: center;
  }

}

/*------------------------------------*
  Modifier: form
*------------------------------------*/
.c-callout--form {

  .c-callout__body {
    width: 100%;
    max-width: remify(900px);
    margin-left: auto;
    margin-right: initial;
  }
  
}
  • URL: /components/raw/callout/_callout.scss
  • Filesystem Path: src/pattern-library/02-components/callout/_callout.scss
  • Size: 1 KB
  • Handle: @callout--default
  • Preview:
  • Filesystem Path: src/pattern-library/02-components/callout/callout.twig

No notes defined.