Joran design system

Testimonial 

<div class="o-container o-container--large c-testimonial">
    <div class="o-box">
        <div class="c-testimonial__flex">

            <div class="c-testimonial__facecontainer">
                <img class="c-avatar c-avatar--responsive c-testimonial__face" src="https://source.unsplash.com/200x200/?face" alt="This is an avatar" itemprop="image">
            </div>

            <div class="o-stack c-testimonial__textcontainer">
                <div class="o-stack o-stack--small">
                    <div class="c-testimonial__author">

                        <span class="u-visually-hidden">Auteur: </span><span>MME Prénom Nom</span>

                        <span class="u-visually-hidden">, Fonction: </span> <span class="c-testimonial__author--function">Fonction</span>

                    </div>

                    <h3 class="c-testimonial__header">[H1] Lorem ipsum dolor sit amet</h3>
                </div>

                <div class="c-testimonial__text o-prose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus maximus blandit. Donec dui enim, finibus ut mi vel, gravida rutrum est. Donec sed lectus fringilla, ultricies metus sed, lobortis ligula. Nullam vitae fermentum sem. Proin sollicitudin varius ante at faucibus. Suspendisse ut tellus lectus. Ut non leo vel ipsum facilisis fermentum. Morbi molestie ornare nibh, nec iaculis augue sodales et. Fusce molestie convallis interdum. Nullam sit amet luctus quam, eget hendrerit mi. Aenean lorem diam, pellentesque ac vestibulum a, dapibus sed felis. Nam rutrum leo quis dignissim eleifend.
                </div>

                <div id="js-more-1" class="js-accordeon__fulltext o-prose">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus maximus blandit. Donec dui enim, finibus ut mi vel, gravida rutrum est. Donec sed lectus fringilla, ultricies metus sed, lobortis ligula. Nullam vitae fermentum sem. Proin sollicitudin varius ante at faucibus. Suspendisse ut tellus lectus. Ut non leo vel ipsum facilisis fermentum. Morbi molestie ornare nibh, nec iaculis augue sodales et. Fusce molestie convallis interdum. Nullam sit amet luctus quam, eget hendrerit mi. Aenean lorem diam, pellentesque ac vestibulum a, dapibus sed felis. Nam rutrum leo quis dignissim eleifend.</p>
                    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
                </div>

                <button aria-expanded="false" aria-controls="js-more-1" aria-pressed="false" class="c-button c-button--transparent c-testimonial__button js-accordeon__toggle-btn" hidden>
                    <span class="js-accordeon__toggle-btn-text">Afficher plus</span><span class="u-visually-hidden"> de [H1] Lorem ipsum dolor sit amet</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                        <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </button>

            </div>
        </div>
    </div>
</div>
 
<div class="o-container o-container--large c-testimonial">
    <div class="o-box">
        <div class="c-testimonial__flex"> 
            
            <div class="c-testimonial__facecontainer">
                {% render '@avatar--responsive', { styleModifier: "c-testimonial__face" }, true %}
            </div>
            
            <div class="o-stack c-testimonial__textcontainer">
                <div class="o-stack o-stack--small">
                    <div class="c-testimonial__author">
                        {% if author and function %}
                        {% if author -%}
                            <span class="u-visually-hidden">Auteur: </span><span>{{ author }}</span>
                        {%- endif %}
                        {% if function %}
                            <span class="u-visually-hidden">, Fonction: </span> <span class="c-testimonial__author--function">{{ function }}</span>
                        {%- endif %}
                        {% endif %}
                    </div>
                    
                    <h3 class="c-testimonial__header">{{ header }}</h3>
                </div>
                
                <div class="c-testimonial__text o-prose">
                    {{ text }}
                </div>
                {% if fulltext %}
            
                    <div id="js-more-1" class="js-accordeon__fulltext o-prose">
                        {{ fulltext | safe }}
                    </div>
                
                    <button aria-expanded="false"
                            aria-controls="js-more-1"
                            aria-pressed="false"
                            class="c-button c-button--transparent c-testimonial__button js-accordeon__toggle-btn"
                            hidden>
                        <span class="js-accordeon__toggle-btn-text">Afficher plus</span><span class="u-visually-hidden"> de {{ header }}</span>{% render '@svg-chevron-right' %}
                    </button>
                
                {% endif %}
            </div>
        </div>
    </div>
</div>
 
{
  "header": "[H1] Lorem ipsum dolor sit amet",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus maximus blandit. Donec dui enim, finibus ut mi vel, gravida rutrum est. Donec sed lectus fringilla, ultricies metus sed, lobortis ligula. Nullam vitae fermentum sem. Proin sollicitudin varius ante at faucibus. Suspendisse ut tellus lectus. Ut non leo vel ipsum facilisis fermentum. Morbi molestie ornare nibh, nec iaculis augue sodales et. Fusce molestie convallis interdum. Nullam sit amet luctus quam, eget hendrerit mi. Aenean lorem diam, pellentesque ac vestibulum a, dapibus sed felis. Nam rutrum leo quis dignissim eleifend.",
  "fulltext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus maximus blandit. Donec dui enim, finibus ut mi vel, gravida rutrum est. Donec sed lectus fringilla, ultricies metus sed, lobortis ligula. Nullam vitae fermentum sem. Proin sollicitudin varius ante at faucibus. Suspendisse ut tellus lectus. Ut non leo vel ipsum facilisis fermentum. Morbi molestie ornare nibh, nec iaculis augue sodales et. Fusce molestie convallis interdum. Nullam sit amet luctus quam, eget hendrerit mi. Aenean lorem diam, pellentesque ac vestibulum a, dapibus sed felis. Nam rutrum leo quis dignissim eleifend.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>",
  "author": "MME Prénom Nom",
  "function": "Fonction",
  "more": "Afficher plus"
}
  • Content: 
    /* ======================================================================
   # _components.testimonial.css
   ====================================================================== */

/* -----------------------------------
   # Main row
   ----------------------------------- */
.c-testimonial__flex {
  @apply
    flex
    flex-col
    ;

  @screen md {
    @apply
      flex-row
      ;
  }

  @screen print {
    @apply
      flex-row
      ;
  }
}

/* -----------------------------------
   # Image
   ----------------------------------- */

.c-testimonial__facecontainer {
  @apply
    flex
    flex-row
    justify-center
    ;
}

@screen md {
  .c-testimonial__facecontainer {
    @apply
      w-1/3
      justify-start
      ;
  }
}

@screen print {
  .c-testimonial__facecontainer {
    @apply
      w-1/3
      justify-center
      ;
  }
}

.c-testimonial__face {
  @apply
    mb-4
    ;
}

/* -----------------------------------
  # Header before text
  ----------------------------------- */
.c-testimonial__header {
  @extend %h1;

  @apply
    text-black
    text-center
    md:text-left
  ;

  @screen print {
    @apply text-left;
  }
}

/* -----------------------------------
   # Text
   ----------------------------------- */

.c-testimonial__textcontainer {
  @apply
    text-center
  ;
}

@screen md {
  .c-testimonial__textcontainer {
    @apply
      text-left
      w-2/3
    ;
  }
}

@screen print {
  .c-testimonial__textcontainer {
    @apply
      text-left
      w-2/3
    ;
  }
}


/* -----------------------------------
   # Author
   ----------------------------------- */

.c-testimonial__author {
  @extend %h4;

  @apply
    text-black
    text-center
    md:text-left
  ;

  @screen print {
    @apply text-left;
  }
}

/* -----------------------------------
   # Function
   ----------------------------------- */
.c-testimonial__author--function {
  @apply
    block
    md:inline
  ;

  @screen print {
    @apply inline;
  }
}

.c-testimonial__author--function::before {
  content: "";
}

@screen md {
  .c-testimonial__author--function::before {
    content: " — ";
  }
}

/* -----------------------------------
   # Button
   ----------------------------------- */

.c-testimonial__button {
  @apply mx-auto;

  @extend .u-print-hidden;
}

@screen md {
  .c-testimonial__button {
    @apply mx-0;
  }
}
  • URL: /components/raw/testimonial/_components.testimonial.css
  • Filesystem Path: src/components/04-Components/testimonial/_components.testimonial.css
  • Size: 2.3 KB

No notes defined.