Mercedes Pattern Library

Accordion Row: Sprint 3 6 

<div class="m-accordion-row__wrapper">
    <div class="m-accordion-row__col">
        <div class="m-accordion-row__child">
            <div class="m-action-controls">

                <div class="m-action-controls__child">

                    <svg class="icon icon--loked">
  <use xlink:href="../../assets/icons.svg#loked" />
</svg>

                    <div class="m-action-controls__child__notification">

                        <div class="a-notification">
                            3
                        </div>

                    </div>

                </div>

            </div>

        </div>
        <div class="m-accordion-row__child m-accordion-row__child-title">
            Blocchi
        </div>
        <div class="m-accordion-row__child c-darkGray">
            <p>Controllo proposta</p>
            <p>PEP</p>
            <p>Blocco numero 3</p>
        </div>
    </div>
    <div class="m-accordion-row__col">
        <div class="m-accordion-row__child">
            <div class="m-action-controls">

                <div class="m-action-controls__child">

                    <svg class="icon icon--note">
  <use xlink:href="../../assets/icons.svg#note" />
</svg>

                </div>

            </div>

        </div>
        <div class="m-accordion-row__child m-accordion-row__child-title">
            Ultima nota
        </div>
        <div class="m-accordion-row__child">
            <p>Bonino Marco</p>
            <p class="c-darkGray">problema documenti</p>
        </div>
    </div>
    <div class="m-accordion-row__col">
        <div class="m-accordion-row__child c-darkGray">
            Stato
        </div>
        <div class="m-accordion-row__child">
            72
        </div>
        <div class="m-accordion-row__child c-darkGray">
            Data ultimo documento
        </div>
        <div class="m-accordion-row__child">
            20-11-2016
        </div>
    </div>
    <div class="m-accordion-row__col">
        <div class="m-accordion-row__child c-darkGray">
            Causale sospensione
        </div>
        <div class="m-accordion-row__child">
            Blocco telaio
        </div>
    </div>
    <div class="m-accordion-row__col">
    </div>
</div>

<div class="m-accordion-row__controls">
    <div class="m-footer-controls">

        <div class="m-footer-controls__child">

            <div class="a-button">
                Annulla
            </div>

            <div class="a-button  a-button--azure">
                Consulta proposta
            </div>

        </div>

    </div>

</div>
 
<div class="m-accordion-row__wrapper">
      <div class="m-accordion-row__col">
          <div class="m-accordion-row__child">
              {% render '@action-controls', { "actions": [{ "icon": "loked", "count": 3 }]} %}
          </div>
          <div class="m-accordion-row__child m-accordion-row__child-title">
              Blocchi
          </div>
          <div class="m-accordion-row__child c-darkGray">
              <p>Controllo proposta</p>
              <p>PEP</p>
              <p>Blocco numero 3</p>
          </div>
      </div>
      <div class="m-accordion-row__col">
          <div class="m-accordion-row__child">
              {% render '@action-controls', { "actions": [{ "icon": "note" }]} %}
          </div>
          <div class="m-accordion-row__child m-accordion-row__child-title">
              Ultima nota
          </div>
          <div class="m-accordion-row__child">
              <p>Bonino Marco</p>
              <p class="c-darkGray">problema documenti</p>
          </div>
      </div>
      <div class="m-accordion-row__col">
          <div class="m-accordion-row__child c-darkGray">
              Stato
          </div>
          <div class="m-accordion-row__child">
              72
          </div>
          <div class="m-accordion-row__child c-darkGray">
              Data ultimo documento
          </div>
          <div class="m-accordion-row__child">
              20-11-2016
          </div>
      </div>
      <div class="m-accordion-row__col">
          <div class="m-accordion-row__child c-darkGray">
              Causale sospensione
          </div>
          <div class="m-accordion-row__child">
              Blocco telaio
          </div>
      </div>
      <div class="m-accordion-row__col">
      </div>
    </div>

    <div class="m-accordion-row__controls">
        {% render '@footer-controls',  {
            "right": [
                {
                    "atom": "buttons",
                    "value": "Annulla"
                },
                {
                    "atom": "buttons--azure",
                    "value": "Consulta proposta"
                }
            ]
        } %}
    </div>
 
/* No context defined for this component. */

There are no notes for this item.