Helpers / Classes d’aide

<div style="border: 1px solid #ccc;" class="su-clearfix">
    Bloc parent comportant le clearfix.
    <div style="float: right; background: #efefef; height: 70px">Bloc flotant de 70px de haut.</div>
</div>
<div style="border: 1px solid #ccc;">Autre contenu</div>

<div class="su-hidden-xs" style="background-color: #70b2ff">1. su-hidden-xs</div>
<div class="su-hidden-sm" style="background-color: #74ef37">2. su-hidden-sm</div>
<div class="su-hidden-md" style="background-color: #fdff2e">3. su-hidden-md</div>
<div class="su-hidden-lg" style="background-color: #ffc850">4. su-hidden-lg</div>
<div class="su-hidden-xl" style="background-color: #ff5858">5. su-hidden-xl</div>

<div class="su-visible-xs" style="background-color: #70b2ff">1. su-visible-xs</div>
<div class="su-visible-sm" style="background-color: #74ef37">2. su-visible-sm</div>
<div class="su-visible-md" style="background-color: #fdff2e">3. su-visible-md</div>
<div class="su-visible-lg" style="background-color: #ffc850">4. su-visible-lg</div>
<div class="su-visible-xl" style="background-color: #ff5858">5. su-visible-xl</div>

<p class="su-text-center"><strong>Paragraphe avec texte centré</strong>. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat.</p>

<p class="su-text-justify"><strong>Paragraphe avec texte justifié</strong>. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat.</p>

<p class="su-text-left"><strong>Paragraphe avec texte ferré à gauche</strong>. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat.</p>

<p class="su-text-right"><strong>Paragraphe avec texte ferré à droite</strong>. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat.</p>

<p style="width: 60%;" class="su-block-center"><strong>Paragraphe à largeur fixée et centré</strong>. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat.</p>

<p style="width: 60%;" class="su-block-left"><strong>Paragraphe à largeur fixée et ferré à gauche</strong>. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat.</p>

<p style="width: 60%;" class="su-block-right"><strong>Paragraphe à largeur fixée et ferré à droite</strong>. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat.</p>

<button class="su-button su-secondary su-fullwidth-mobile">Bouton en pleine largeur sur mobile</button>

<style>
    body {
        border: 1px dashed var(--rouge);
    }
    .su-container {
        border: 1px dashed var(--vert);
    }
    .exemple {
        background: var(--gris);
        height: 50px;
    }
</style>
<section class="su-container">
    <div class="su-row">
        <div class="su-col-md-12 exemple">Bloc standard</div>
    </div>
    <div class="su-row">
        <div class="su-col-md-12 su-stretched-mobile exemple">Bloc pleine largeur d’écran en mobile</div>
    </div>
</section>

<ul class="su-columns-2">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
    <li>Élément 4</li>
    <li>Élément 5</li>
    <li>Élément 6</li>
    <li>Élément 7</li>
    <li>Élément 8</li>
    <li>Élément 9</li>
    <li>Élément 10</li>
    <li>Élément 11</li>
    <li>Élément 12</li>
    <li>Élément 13</li>
    <li>Élément 14</li>
    <li>Élément 15</li>
</ul>

<div class="su-columns-desktop-4">
    <p>Élément 1</p>
    <p>Élément 2</p>
    <p>Élément 3</p>
    <p>Élément 4</p>
    <p>Élément 5</p>
    <p>Élément 6</p>
    <p>Élément 7</p>
    <p>Élément 8</p>
    <p>Élément 9</p>
    <p>Élément 10</p>
    <p>Élément 11</p>
    <p>Élément 12</p>
    <p>Élément 13</p>
    <p>Élément 14</p>
    <p>Élément 15</p>
</div>

<ul class="su-columns-2 su-columns-tablet-3 su-columns-desktop-4">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
    <li>Élément 4</li>
    <li>Élément 5</li>
    <li>Élément 6</li>
    <li>Élément 7</li>
    <li>Élément 8</li>
    <li>Élément 9</li>
    <li>Élément 10</li>
    <li>Élément 11</li>
    <li>Élément 12</li>
    <li>Élément 13</li>
    <li>Élément 14</li>
    <li>Élément 15</li>
</ul>

<ul class="su-columns-2 su-columns-desktop-4 su-columns-min-width-200">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
    <li>Élément 4</li>
    <li>Élément 5</li>
    <li>Élément 6</li>
    <li>Élément 7</li>
    <li>Élément 8</li>
    <li>Élément 9</li>
    <li>Élément 10</li>
    <li>Élément 11</li>
    <li>Élément 12</li>
    <li>Élément 13</li>
    <li>Élément 14</li>
    <li>Élément 15</li>
</ul>

<div class="su-columns-2 su-columns-no-cut">
    <p>Élément 1</p>
    <p>Élément 2</p>
    <p>Élément 3 long<br />
        Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed.</p>
    <p>Élément 4</p>
    <p>Élément 5</p>
</div>

<p><span class="su-uppercase">Logoden biniou degemer mat e penn ar bed pegeit</span>, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed.</p>

<table>
    <tr>
        <td class="su-nowrap">Texte long sans retour à la ligne.</td>
        <td>Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed. Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo.</td>
    <tr>
</table>

<p class="su-margin-bottom-m" style="width: 150px; border: 1px dashed #d4d4d4">Logoden biniou degemer <strong>motsuperlongpourlexemple</strong> mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale.</p>
<p class="su-breakword" style="width: 150px; border: 1px dashed #d4d4d4">Logoden biniou degemer <strong>motsuperlongpourlexemple</strong> mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale.</p>

<p class="su-hyphens" lang="fr" style="width: 150px; border: 1px dashed #d4d4d4">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da.</p>

<p class="su-truncate-2" style="width: 130px">Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da.</p>

<p class="su-line-height-xs">Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer.</p>
<p class="su-line-height-s su-margin-top-m">Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer.</p>
<p class="su-line-height-m su-margin-top-m">Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer.</p>
<p class="su-line-height-l su-margin-top-m">Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer.</p>
<p class="su-line-height-xl su-margin-top-m">Ar c’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer.</p>

<div class="su-standard-border su-standard-radius su-standard-padding">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale.</div>

<p class="su-disabled" aria-disabled="true">Paragraphe utilisant cette classe.</p>

<p class="su-negative">Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da.</p>