Tangible Pattern Library

Newsletter 

<div class="c-newsletter">
    <div class="c-newsletter__content">
        <div class="c-newsletter__title"></div>
        <div class="c-newsletter__body">
            <p>The Loop,<br> un vortice di <strong>news</strong> e <strong>approfondimenti</strong></p>
        </div>
    </div>
    <div class="c-newsletter__sub">

        <a href="#" class="c-action c-action--accent" data-notation="circle-accent">Iscriviti alla newsletter</a>
    </div>
</div>
 
<div class="c-newsletter{% if modifier is defined %} {{ modifier }}{% endif %}">
  <div class="c-newsletter__content">
    <div class="c-newsletter__title">{{ title|raw }}</div>
    <div class="c-newsletter__body">{{ content|raw }}</div>
  </div>
  <div class="c-newsletter__sub">
    {% include "@link" with {
      modifier: action.modifier is defined ? action.version : null ,
      text: action.text,
      url: action.url,
      version: action.version is defined ? action.version : "accent"
    } %}
  </div>
</div>
 
{
  "content": "<p>The Loop,<br> un vortice di <strong>news</strong> e <strong>approfondimenti</strong></p>",
  "action": {
    "text": "Iscriviti alla newsletter",
    "url": "#"
  }
}
  • Content: 
    .c-newsletter {
  padding: spacing(space-24) spacing(space-16);
  border: remify(2px) solid useHSL(--primary-100);
  text-align: center;
  color: useHSL(--primary-100);

  @include min-screen(bp(large)) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: initial;
    padding: spacing(space-48);
    border: remify(4px) solid useHSL(--primary-100);
    // background-image: url('./../images/nl-asset-bg.svg');
    // background-size: remify(310px);
    // background-repeat: no-repeat;
    // background-position: 97% center;
  }

}

.c-newsletter__title {
  @include font-scale(level-6, $font-primary);
  margin-bottom: spacing(space-8);
  color: currentColor;
}

.c-newsletter__body {
  @include font-scale(level-3, $font-secondary);
  color: currentColor;
}

.c-newsletter__sub {
  margin-top: spacing(space-24);
  
  @include min-screen(bp(large)) {
    margin-top: 0;
  }

  a {
    color: currentColor;
  }
}

/*------------------------------------*
  Inverted
*------------------------------------*/
.c-newsletter--inverted {
  background-color: useHSL(--primary-100);
  border: none;
  color: useHSL(--base-100);
}
  • URL: /components/raw/newsletter/_newsletter.scss
  • Filesystem Path: src/pattern-library/02-components/newsletter/_newsletter.scss
  • Size: 1.2 KB

No notes defined.