## Modal

<sonic-code>
  <template>
    <sonic-button onclick="document.getElementById('modalExample').show()">
      Simple modal
    </sonic-button>
    <sonic-modal id="modalExample">
      <sonic-modal-title
        >Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
      >
      <sonic-modal-subtitle>Donec sed vestibulum augue.</sonic-modal-subtitle>
      <sonic-modal-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
      </sonic-modal-content>
      <sonic-modal-actions formDataProvider="ModalMiniForm">
        <sonic-button FormCheckable  minWidth="8rem" value="true" name="click">
          Click don't close
        </sonic-button>
        <sonic-button minWidth="8rem" type="success" hideModal>Confirm</sonic-button>
      </sonic-modal-actions>
    </sonic-modal>
  </template>
</sonic-code>


## Long text

<sonic-code>
  <template>
    <sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
    <sonic-modal align="left" id="modalText">
      <sonic-modal-title>Infos et tarifs </sonic-modal-title>
      <sonic-modal-content>
        <div class="prose">
          <p>
            <strong>Horaires d’ouverture </strong><br />
            Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h<br />
            + horaires spécifiques pour événements ou festivals&nbsp;
          </p>
          <p>
            <strong> Billetterie&nbsp;<br /></strong>
            La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
            réservations disponibles en ligne ou au guichet.&nbsp;&nbsp;<strong><br /></strong>
          </p>
          <p>
            Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
            varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
            conseillé de réserver les billets en avance pour s’assurer une place.
          </p>
          <p>
            L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
            nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
          </p>
          <p>
            <strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833&nbsp;
          </p>
          <br />
          <p>
            <strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
            Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique&nbsp;
          </p>
          <p>
            Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
            billetterie@laconditionpublique.com
          </p>
        </div>
      </sonic-modal-content>
    </sonic-modal>
  </template>
</sonic-code>

## Force action

<sonic-code>
  <template>
    <sonic-button onclick="document.getElementById('force').show()"> Force action to close</sonic-button>
    <sonic-modal forceAction id="force">
      <sonic-modal-title>Do you want some cookies ? </sonic-modal-title>
      <sonic-modal-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
      </sonic-modal-content>
      <sonic-modal-actions >
        <sonic-button hideModal minWidth="8rem"> Nope </sonic-button>
        <sonic-button hideModal minWidth="8rem" type="success">Hell yes !</sonic-button>
      </sonic-modal-actions>
    </sonic-modal>
    </sonic-modal>
  </template>
</sonic-code>

## Custom dimensions

<sonic-code>
  <template>
    <sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
    <sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
      <sonic-image
        cover
        objectPosition="center 20%"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      ></sonic-image>
    </sonic-modal>
  </template>
</sonic-code>

## Fullscreen

<sonic-code>
  <template>
    <sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
    <sonic-modal fullscreen id="Fullscreen">
      <sonic-image
        cover
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      ></sonic-image>
    </sonic-modal>
  </template>
</sonic-code>