Aeroporto di Bologna - Design System

Strip cartoon 

<div class="c-strip-cartoon ">

    <div class="c-strip-cartoon__inner">

        <div class="c-strip-cartoon__content">
            <h3>1. Le persone al centro</h3>
            <h4>Una guida per ogni passeggero</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolore ab rerum facilis amet. Suscipit quae, esse facere provident vero accusamus. Saepe quaerat, deserunt culpa nisi fugit cumque recusandae ratione!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolore ab rerum facilis amet. Suscipit quae, esse facere provident vero accusamus. Saepe quaerat, deserunt culpa nisi fugit cumque recusandae ratione!</p>

            <ul>
                <strong>List title:</strong>
                <li><a href="#"><strong>List element</strong></a></li>
                <li><a href="#"><strong>List element</strong></a></li>
                <li><a href="#"><strong>List element</strong></a></li>
                <li><a href="#"><strong>List element</strong></a></li>
                <li><a href="#"><strong>List element</strong></a></li>
                <li><a href="#"><strong>List element</strong></a></li>
            </ul>
            <a href="#" class="c-link c-link--primary">
                <span>Link</span>
                <svg class="svg-24">
                    <use xlink:href="#ic_chevron_right_black_24px"></use>
                </svg></a>
        </div>

        <div class="c-strip-cartoon__picture">
            <img src="../../images/svgs/routes/ill-animali-veterinario.svg" alt="Veterinario">
        </div>

    </div>

    <img class="ornament-cloud " src="../../images/svgs/cloud.svg" alt="" aria-hidden="true">

</div>
 
<div class="c-strip-cartoon {{ modifier }}">

  <div class="c-strip-cartoon__inner">

    <div class="c-strip-cartoon__content">
      {{#> @partial-block }}
      <h3>1. Le persone al centro</h3>
      <h4>Una guida per ogni passeggero</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolore ab rerum facilis amet. Suscipit quae, esse facere provident vero accusamus. Saepe quaerat, deserunt culpa nisi fugit cumque recusandae ratione!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolore ab rerum facilis amet. Suscipit quae, esse facere provident vero accusamus. Saepe quaerat, deserunt culpa nisi fugit cumque recusandae ratione!</p>

      <ul>
        <strong>List title:</strong>
        <li><a href="#"><strong>List element</strong></a></li>
        <li><a href="#"><strong>List element</strong></a></li>
        <li><a href="#"><strong>List element</strong></a></li>
        <li><a href="#"><strong>List element</strong></a></li>
        <li><a href="#"><strong>List element</strong></a></li>
        <li><a href="#"><strong>List element</strong></a></li>
      </ul>
      {{> @link--primary link }}
      {{/ @partial-block }}
    </div>

    <div class="c-strip-cartoon__picture">
      <img src="{{ path illustration.path }}" alt="{{ illustration.alt }}">
    </div>

  </div>

  {{#if ornament-img}}
    <img class="ornament-cloud {{ ornament-img.modifier }}" src="{{ path ornament-img.path }}" alt="" aria-hidden="true" >
  {{/if}}

</div>
 
{
  "illustration": {
    "path": "/images/svgs/routes/ill-animali-veterinario.svg",
    "alt": "Veterinario"
  },
  "link": {
    "text": "Link",
    "url": "#",
    "modifier": "c-link--primary",
    "svg": true
  },
  "ornament-img": {
    "path": "/images/svgs/cloud.svg"
  }
}
  • Content: 
    .c-strip-cartoon {
  position: relative;
  padding-left: remify(16px);
  padding-right: remify(16px);

  main & {
    grid-column: full;
  }

  & + & {
    margin-top: remify(95px);
  }

}

.c-strip-cartoon__inner {
  max-width: remify($base-page-width);
  margin: 0 auto;

  @include min-screen(bp(tablet)) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.c-strip-cartoon__content,
.c-strip-cartoon__picture {

  @include min-screen(bp(tablet)) {
    flex: 0 1 50%;
  }

}

.c-strip-cartoon__content {
  margin-bottom: remify(24px);

  @include min-screen(bp(tablet)) {
    margin-bottom: 0;
    padding-right: remify(24px);
  }
}

.c-strip-cartoon__picture {
  @include min-screen(bp(tablet)) {
    text-align: right;
  }
}

.c-strip-cartoon__picture img {
  max-height: remify(350px);
  max-width: remify(700px);

  @include min-screen(bp(tablet)) {
    max-height: remify(650px);
  }
}

.c-strip-cartoon__content h3,
.c-strip-cartoon__content h4 {
  color: primary(night, 100);
}

.c-strip-cartoon__content h3 {
  font-size: 150%;
  line-height: 1.333;
  margin-bottom: remify(24px);

  @include min-screen(bp(tablet)) {
    font-size: 200%;
    line-height: 1.5;
  }

}

.c-strip-cartoon__content h4 {
  font-size: 125%;
  line-height: 1.4;
  font-weight: fw(semibold);
  margin-bottom: remify(8px);

  @include min-screen(bp(tablet)) {
    font-size: 150%;
    line-height: 1.333;
  }

}

.c-strip-cartoon__content ul {
  margin-top: remify(40px);
  line-height: 2.2;
}

.c-strip-cartoon__content p + p {
  margin-top: remify(16px);
}

.c-strip-cartoon__content .c-link {
  margin-top: remify(24px);
}

.c-strip-cartoon .ornament-cloud {
  position: absolute;
  bottom: remify(-130px);
  max-width: remify(460px); 

  @include min-screen(bp(tablet)) {
    max-width: remify(664px);
    bottom: remify(-150px);
  }
}

.c-strip-cartoon .ornament-cloud--outRight {
  right: remify(-140px);
}

.c-strip-cartoon .ornament-cloud--outLeft {
  left: remify(-170px);
  
  @include min-screen(bp(tablet)) {
    left: remify(-270px);
  }
}

.c-strip-cartoon .ornament-cloud--smallInRight {
  max-width: remify(480px);
  right: remify(-200px);
  bottom: remify(-100px);

  @include min-screen(bp(tablet)) {
    right: 8vw;
  }
}

/*------------------------------------*\
  Reverse modifier
\*------------------------------------*/

.c-strip-cartoon--reverse {

  .c-strip-cartoon__inner {
    @include min-screen(bp(tablet)) {
      flex-direction: row-reverse;
    }   
  }

  .c-strip-cartoon__content {
    @include min-screen(bp(tablet)) {
      padding-right: 0;
      padding-left: remify(24px);
    }
  }

  .c-strip-cartoon__picture {
    @include min-screen(bp(tablet)) {
      text-align: left;
    }
  }

}
  • URL: /components/raw/strip-cartoon/_strip-cartoon.scss
  • Filesystem Path: src/views/03-organisms/strip-cartoon/_strip-cartoon.scss
  • Size: 2.7 KB

No notes defined.