Lunds universitet - Style Guide

Toggle Card: Card C 

<div class="expand bg-copper-50 mb-3">
    <div class="expand-content">
        <div class="expand-content-lead">
            <blockquote class="blockquote">
                <p class="mb-0"><i class="fas fa-3x fa-quote-right fa-pull-left"></i>Lorem ipsum dolor sit amet, consectetur emut adipiscing elit. Donec sed lacus luctus purus eti tempus vehicula. Aliquam malesuada fermentum faucibus. Nunc viverra tortor vitae sollicitudinaretra. Integer molestie tristique justo ac venenatis. Etiam sit amet rhoncus.</p>
                <footer class="blockquote-footer text-end">Someone famous in <cite>Source Title</cite></footer>
            </blockquote>

        </div>
        <div class="expand-content-body">
            <p>I chose SSE because the overall package offered is the perfect fit for me: education is not only of the highest quality but also free; students are selected not only based on grades and CVs but also on personality and mentality leading to a truly friendly and welcoming atmosphere; and SASSE, our student association, offers social, educational and professional activities that round off the whole SSE experience in the best way possible. I chose the MIB program because of its major international focus and diversity. Its unique curriculum including extremely valuable international field and study trips as well as an internship and one semester abroad, and the fantastic reputation of both, SSE and the fully-integrated CEMS MIM, were all appealing aspects.</p>
            <p>I would recommend SSE and MIB to everyone because of the excellent, hands-on, future-oriented and individual learning and development opportunities. Our course director and managers also work hard to make the program the very best possible. I literally enjoy every part of the program and really feel that I will be well-equipped to face the life after my Master program. Besides, Stockholm is an absolutely lovely city and the Swedish culture is great to experience. I have not regretted my decision to come here for a single day – quite the opposite!</p>
            <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>

        </div>
    </div>
    <button class="expand-control">
        <span class="expand-closed">
            <a href="fallback.html" class="expand-fallback">Read the full story&nbsp;<span class="ms-1"><i class="fal fa-chevron-down"></i></span></a>
        </span>
        <span class="expand-open">
            <a class="expand-fallback">
                Hide story&nbsp;<span class="ms-1"><i class="fal fa-chevron-up"></i></span>
            </a>
        </span>
    </button>
</div>
 
<div class="expand bg-copper-50 mb-3{{modifiers modifiers}}">
  <div class="expand-content">
    <div class="expand-content-lead">
      {{render (concat "@" lead)}}
    </div>
    <div class="expand-content-body">
      {{render (concat "@" body)}}
    </div>
  </div>
  <button class="expand-control">
    <span class="expand-closed">
      <a href="{{fallback}}" class="expand-fallback">{{label-expand}}&nbsp;<span class="ms-1"><i
            class="fal fa-chevron-down"></i></span></a>
    </span>
    <span class="expand-open">
      <a class="expand-fallback">
        {{label-contract}}&nbsp;<span class="ms-1"><i class="fal fa-chevron-up"></i></span>
      </a>
    </span>
  </button>
</div>
 
{
  "label-expand": "Read the full story",
  "label-contract": "Hide story",
  "fallback": "fallback.html",
  "lead": "toggle-card-lead--c",
  "body": "toggle-card-body--c"
}

No notes defined.