Accordion

Accordion component

[object Object],[object Object]

C o n t e n t b o d y true

C o n t e n t b o d y 2 true

Markup Details

                            <!-- Accordion Style 1 (Default) -->
<div class="accordion" id="accordion-1">
    {{ accordion }}
  {% for key, item in accordion %}
    {% include 'accordion-section.twig' with {
      expanded: item.expanded,
      title: item.title,
      content_body: item.content,
      paragraph_id: item.paragraph_id,
      key: key,
    } only %}
  {% endfor %}
</div>

Copy/paste this HTML code into CKEditor paragraph and edit content. Make sure you switch to source formatting and to be in FULL HTML mode to paste your code. Your ID must be unique and add the same value for the aria-labelledby. Your href must match an ID in the page if you want an anchor in the same page. You can add this anchor it on a existing content or on a new paragraph containing this ID. You can use a href to redirect to an another page.

You can remove CTA button if you don't need it. You con add extra class to control your margins between links an your CTA button. To have an active item, add class active.

Markup Details

                            <div class="anchors-navigation dropdown">
  <button class="btn btn-secondary dropdown-toggle d-md-none" type="button" id="yourid" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu an__items" aria-labelledby="yourid" style="">
    <a class="dropdown-item an__item active" href="#anchor-1">Anchor link 1</a>
    <a class="dropdown-item an__item" href="#anchor-2">Anchor link 2</a>
    <a class="dropdown-item an__item" href="#anchor-3">Anchor link 3</a>
  </div>
  <a href="#" class="btn btn-outline-primary mt-3 ml-md-3 mt-md-0">CTA button</a>
</div>

Breadcrumb

Markup Details

                            <div class="grid-container-large">
  <nav role="navigation" aria-label="breadcrumb">
    <ol class="breadcrumb">
      {% for item in breadcrumb %}
        {% if item.url %}
          <li class="breadcrumb-item">
            <a href="{{ item.url }}">{{ item.text }}</a>
          </li>
        {% else %}
          <li class="breadcrumb-item active">
            {{ item.text }}
          </li>
        {% endif %}
      {% endfor %}
    </ol>
  </nav>
</div>

Forms

Option - Dark form background color

Markup Details

                            <form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      Default checkbox
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
    <label class="form-check-label" for="defaultCheck2">
      Disabled checkbox
    </label>
  </div>
  <div class="form-check mt-5">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      Default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
      Second default radio
    </label>
  </div>
  <div class="form-check disabled">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
      Disabled radio
    </label>
  </div>

  <div class="form-input-wide jf-required radio-switch radio-switch--arrows mt-5 w-md-50" id="cid_9">
    <div aria-labelledby="label_9" class="form-single-column rs__wrapper" data-component="radio" role="group">
      <span class="form-radio-item">
        <input checked="checked" class="form-radio validate[required]" id="input_9_0" name="q9_moreAbout"  required="" type="radio" value="Specific needs"/>
        <label for="input_9_0" id="label_input_9_0"> Specific needs </label>
      </span>
      <span class="form-radio-item">
        <input class="form-radio validate[required]" id="input_9_1" name="q9_moreAbout" required="" type="radio" value="General request"/>
        <label for="input_9_1" id="label_input_9_1"> General request </label>
      </span>
    </div>
  </div>

  <div class="form-input-wide radio-switch mt-5 w-md-50" id="cid_14">
    <div aria-labelledby="label_14" class="form-single-column rs__wrapper" data-component="radio" role="group">
      <span class="form-radio-item" style="clear:left">
        <input class="form-radio" id="input_14_0" name="q14_customPrinting" type="radio" value="Yes"/>
        <label for="input_14_0" id="label_input_14_0"> Yes </label>
      </span>
      <span class="form-radio-item" style="clear:left">
        <span class="dragger-item"> </span>
        <input checked="checked" class="form-radio" id="input_14_1" name="q14_customPrinting" type="radio" value="No"/>
        <label for="input_14_1" id="label_input_14_1"> No </label>
      </span>
    </div>
  </div>
</form>

<h3 class="mt-5 mb-2">Option - Dark form background color</h3>
<form class="form--dark bg-bleu-recyclage p-5">
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
</form>

Hero

Hero component

Title field

Markup Details

                            <div class="hero-image" style="background-image:url('{{ image }}')">
  <div class="hero-text">
    <h1>{{ title }}</h1>
  </div>
</div>

Stock Share Info

Stock Share Info component

Dynamic information coming from the api

Markup Details

                            {# Attach  library #}
<script type="text/javascript" src="https://dfc.inovestor.com/CAS/QuoteEngine.aspx?language={{ langcode }}&autoload=true&includeQuote=true&includeChart=true" charset="UTF-8"></script>

<div class="stock-share-info" data-lang="{{ langcode }}">
  <div class="ssi__title">
    <h3 class="heading-large">{{ title }}</h3>
    <p class="tx_code text-xlarge">CAS (TSX)</p>
  </div>
  <div class="ssi__infos">
    <div class="placeholder ssi__values heading-large loading" id="box_bourse">
      <div class="tx_group">
        <span class="tx_name">CAN</span>
        <span class="tx_val" id="ino_last-price_0">-,--$</span>
      </div>
      <span class="tx_change tx_mov" id="ino_change-dollar_0" >0,00$</span>
    </div>
    <p class="ssi__message text-small" id="ino_delayed-info"></p>
  </div>
</div>

Components

Accordion

Anchors navigation

Forms

Option - Dark form background color

Hero

Title field

Components

Accordion

Anchors navigation

Breadcrumb

Forms

Option - Dark form background color

Hero

Title field

Stock Share Info

Shareholder Information CAS (tsx)