Style guide

Heroes

.hero.hero-img-fullsize > img

.hero.hero-img-fullsize.hero-carousel > .carousel-wrapper + .carousel-nav

.hero.hero-title-card

Dans cette page

Qui sommes-nous?

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.hero.hero-info

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.hero.hero-cta

Retour aux publications

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Télécharger le PDF

.hero.hero-img-overlay

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.hero.hero-simple-title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.hero.hero-simple-title with-img

Lorem ipsum dolor

.hero.hero-title

Lorem ipsum dolor sit amet

Usto donec enim diam vulputate ut pharetra sit amet. Lectus proin nibh nisl condimentum id. Egestas sed sed risus pretium quam. Feugiat pretium nibh ipsum consequat.

Text

p.text

Lorem ipsum dolor sit amet, exemple consectetur adipiscing elit. Suspendisse porta venenatis sodales. Fusce tristique, enim porta pharetra porta, nulla est porttitor lectus, eu malesuada dui elit ac leo. Fusce in lectus mi. In ut varius lorem, ac varius nisl. Duis venenatis iaculis arcu ac ultricies. Fusce eu eros vel risus varius gravida sed smalla nulla. Nulla nunc arcu, porttitor vitae lobortis non, tempor quis enim. Proin luctus non elit a mollis. Maecenas aliquam₃, nisi ac vehicula maximus ³, lorem mi rutrum ex, non malesuada elit felis at massa. Morbi sed arcu urna. Phasellus nec efficitur lorem, vitae congue dui. Sed erat mauris, condimentum vitae fringilla at, tincidunt et metus. Duis porta felis eu orci consectetur, in aliquet risus venenatis.

Hello world

Ce qui nous guide

Hello world

Nuts
Cream
Maple syrup baby

Nuts
Cream
Maple syrup baby

La nuit porte de garage.

La nuit porte de garage

See bananas

hello ₂

hello ²

div.wysiwyg

Gros titre super important

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?

Dance floor
Heavy music

* Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Bananes
Chocolat

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?

Titre de section

Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?

Titre de sous-section

Titre de sous-sous-section

Titre de sous-sous-sous-section

Faux titre en strong avec br
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?

Danger	2323
Sexy	298374.29847298347298% *
Looser	0

*Incroyable

Buttons

button.button

.button.large

.button.block

.button.secondary

.button.outline

.button.tab

.button.tab.light

.button.error

.button.success

.button.carousel

.button.carousel.active

.button.icon.rounded

.button.icon.rounded.disabled

Badges

span.badge

Example

span.badge.small

Example

span.badge.large

Example

span.badge.secondary

Example

span.badge.outline

Example

span.badge.secondary.outline.rounded

Example

.badge-group

Action 1 Action 2 Action 3

.badge-group > .badge.small

Action 1 Action 2 Action 3

.badge-group > .badge.large

Action 1 Action 2 Action 3

.badge-group > .badge.outline

Action 1 Action 2 Action 3

.badge-group > .badge.outline

Action 1 Action 2 Action 3

Accordions

.button.accordion.active

L’IFDD recrute ponctuellement des stagiaires pour des durées de 1 à 6 mois. Nos offres de stage sont limitées. Le stage doit s’inscrire dans un cursus pédagogique.

Il est possible d’adresser une candidature spontanée pour un stage à l’IFDD via le formulaire accessible sur la page Contact. La candidature sera analysée et l’IFDD communiquera avec le candidat dans le cas d’une réponse positive.

Par ailleurs, il existe, au sein de la Francophonie, un programme de Volontariat international (VIF) offert aux jeunes francophones, âgés de 21 à 34 ans. Ceux-ci ont la possibilité de mettre, durant 12 mois, leurs savoirs, savoir-faire et savoir-être à la disposition d’un projet de développement, et de vivre une expérience de mobilité internationale au sein de l’espace francophone. L’IFDD accueille chaque année 1 à 3 Volontaires internationaux de la Francophonie.

.button.accordion

Stats

div.stat

100 000

Bénéficiaires par année

.stats-list

20

Employés
100 000

Bénéficiaires par année
20

Projets locaux par année
20

Publications par année

Values

div.value

Compétence

.values-list

Compétence
Performance et innovation
Transparence
Adaptabilité
Humilité et respect

Forms

.input

.input.small

.input.large

.input-wrap > .input-icon, .input-wrap > .input

.input-wrap > .input-icon, .input-wrap > .input.small

.input-wrap > .input-icon, .input-wrap > .input.large

.input-wrap > .input-icon.align-end

select.input

select.input.small

select.input.large

.input-wrap .input-icon + select.input

textarea.input

Merci de bien vouloir consulter les offres d’emploi sur la section «Recrutement» du site de l’Organisation internationale de la Francophonie (OIF), où sont affichés tout éventuel poste vacant à l’IFDD.

.input[type="number"]

.input[type="date"]

.checkbox[type="checkbox"]

Danser sous la pluie

.checkbox[type="radio"]

Danser sous la pluie

.checkbox[type="checkbox"].error

Danser sous la pluie

.input.success

.input.error

.input-wrap > .input-icon.align-end.transparent.success

.input-wrap > .input-icon.align-end.transparent.error

.field > .input-info.error

Exemple d'erreur

.field > .input-info.success

Exemple de message

.field > .input-label

Nom du champ

.input-file

Joindre un fichier

Aucun fichier chargé Charger un fichier

.row.small-gutters > .col > .input

.row.vertical-gutters > .col-6, .row.vertical-gutters > .col-12

Nom du champ

.field > .input-group-horizontal

.input-group-horizontal > .row > .col-4, .input-group-horizontal > .row > .col

.field > .input-group-vertical

Link anchors

Dans cette page

Call to action

.call-to-action.split.full-width > .row.no-gutters

Développer, créer et diffuser un art unique, fait avec des personnes ayant des limitations fonctionnelles, en collaboration avec l’ensemble de la communauté.

.call-to-action.split

L'infolettre de l'IFDD

Inscrivez-vous

.call-to-action.split--2-colors.image-left

L'infolettre de l'IFDD

Inscrivez-vous

Bonhomme 7 heures

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
En savoir plus
Bonhomme 7 heures

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
En savoir plus

.call-to-action.split .block.shadow

Développer, créer et diffuser un art unique, fait avec des personnes ayant des limitations fonctionnelles, en collaboration avec l’ensemble de la communauté.

.call-to-action.overlay

Poursuivre votre lecture

3 courts-métrages qui font sourire pour contrer la crise

.call-to-action.overlay > .card

Autre projet à découvrir

Accès aux services énergétiques modernes en Francophonie

Découvrir le projet

.call-to-action.simple

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.call-to-action.simple

Poursuivre votre lecture

Économie verte – Guide pratique pour l’intégration des stratégies de l’économie verte dans les politiques de développement

Consulter la publication

Poursuivre votre lecture

Guide méthodologique d’élaboration de projets de tourisme durable dans un contexte insulaire

Consulter la publication

Poursuivre votre lecture

Économie verte – Guide pratique pour l’intégration des stratégies de l’économie verte dans les politiques de développement

Consulter la publication

.call-to-action.simple.with-bg

Répertoire d'apprentissage

Les formations et publications qui font grandir

Poursuivre votre lecture

Économie verte – Guide pratique pour l’intégration des stratégies de l’économie verte dans les politiques de développement

Consulter la publication

Poursuivre votre lecture

Guide méthodologique d’élaboration de projets de tourisme durable dans un contexte insulaire

Consulter la publication

.call-to-action > .block.shadow

Vous n’avez pas d’handicap mais souhaitez participer à l’un de nos ateliers? C’est possible!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua.

.call-to-action > .block.bg-secondary

Vous n’avez pas d’handicap mais souhaitez participer à l’un de nos ateliers? C’est possible!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua.

Cards

.card

Intervention

Nouveau record de participation pour le cours en ligne Évaluation environnementale des politiques et projets de développement

Lire cette page

.card .tag-group

Intervention

Nouveau record de participation pour le cours en ligne Évaluation environnementale des politiques et projets de développement

Plus de détails

.card .card-body.border

Événements spéciaux

Bonhomme 7 heures

Lieu défini du projet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Plus de détails

.card.border

Événements spéciaux 19 septembre 2020 Appel à projet

Bonhomme 7 heures

Lieu défini du projet Plus de détails

.card.border

Bonhomme 7 heures

Plus de détails

.card.shadow.rounded

Bonhomme 7 heures

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.card .suptitle

Qui sommes-nous?

Bonhomme 7 heures

.card.rounded.bg-light

Bonhomme 7 heures

Télécharger

.card.rounded.bg-light.text-center

Bonhomme 7 heures

.card > .card-body.border

870, avenue de Salaberry, bureau 109
Québec (Québec) G1R 2T9

418 523-2679

Télécopieur 418 523-6981

.cards-list > .card-body.border

Lorem ipsum dolor sit amet
En savoir plus
Lorem ipsum dolor sit amet, consectetur adipiscing elit
En savoir plus
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
En savoir plus
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
En savoir plus

.cards-group > .card-body.border

Lorem ipsum dolor sit amet, consectetur adipiscing elit
En savoir plus
Lorem ipsum dolor sit amet, consectetur
En savoir plus
Lorem ipsum dolor sit amet, consectetur adipiscing elit
En savoir plus
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
En savoir plus

.card

Témoignage - Garry Lavoie

Directeur général de la Coopérative funéraire des Deux Rives

« Après avoir été président d’honneur de l’événement-bénéfice d’Entr’actes en 2013, j’endosse maintenant le rôle d’ambassadeur avec le plus grand plaisir. La mission d’Entr’actes permet à tous les gens, peu importe leurs limitations fonctionnelles, de s’exprimer à travers des créations artistiques hors du commun. Je suis particulièrement heureux d’y être associé, ayant moi-même un frère différent, mais fantastique. »

Monsieur Garry Lavoie est directeur général de la Coopérative funéraire des Deux Rives – la plus importante coopérative funéraire en Amérique du Nord avec plus de 34 000 membres –, depuis 1998.

Plus de détails

.card.overlap

Événements spéciaux

Bonhomme 7 heures

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

19 avril 2021 Plus de détails

.card.card-image-overlay

Communiqué

Report des ateliers et du spectacle Ruelle

19 avril 2021 Plus de détails

Initiative de la francophonie pour le bassin du Congo

Découvrir le projet

Diplomatie et gouvernance

Séminaires en ligne sur l'économie verte et circulaire, pour «reconstruire en mieux» notre modèle économique.

.card.rounded.text-center.bg-light

Nicolas Biron

+(1) 418 692 5555 Écrire à Nicolas

.card.contact

Contact

Jean-Pierre Ndoutoum

Directeur de l'IFDD

+ (1) 418 692 5727 info@ifdd.francophonie.org

.card.contact.rounded.shadow > .card-body.with-bg

Coordonnées

Vous pouvez joindre l’Institut par courrier postal, par téléphone ou via le formulaire en ligne ci-joint.

56, rue Saint-Pierre, 3e étage, Québec (Québec), G1K 4A1, Canada

+ (1) 418 692 5727 + (1) 418 692 5644 info@ifdd.francophonie.org

.card.contact > .card-body.row

Président

Caraïbes

Jean-Pierre Ndoutoum

Expert international en ingénierie du développement local

Fermathe 53 #53, route de Kenscoff
Kenscoff
HAÏTI

+ (1) 418 692 5727 info@ifdd.francophonie.org

Slider

.carousel.container.inset

La prise en compte des énergies renouvelables, secteur en développement au niveau mondial, comme opportunité pour les pays d’Afrique.

Page 2/6

Video

.video-thumb

.video-thumb

.row .video-thumb

Style guide

Heroes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor

Lorem ipsum dolor sit amet

Text

Gros titre super important

Titre de section

Titre de sous-section

Titre de sous-sous-section

Titre de sous-sous-sous-section

Buttons

Badges

Tags

Accordions

Stats

Values

Forms

Link anchors

Call to action

Inscrivez-vous

Inscrivez-vous

3 courts-métrages qui font sourire pour contrer la crise

Accès aux services énergétiques modernes en Francophonie

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Économie verte – Guide pratique pour l’intégration des stratégies de l’économie verte dans les politiques de développement

Guide méthodologique d’élaboration de projets de tourisme durable dans un contexte insulaire

Économie verte – Guide pratique pour l’intégration des stratégies de l’économie verte dans les politiques de développement

Les formations et publications qui font grandir

Économie verte – Guide pratique pour l’intégration des stratégies de l’économie verte dans les politiques de développement

Guide méthodologique d’élaboration de projets de tourisme durable dans un contexte insulaire

Vous n’avez pas d’handicap mais souhaitez participer à l’un de nos ateliers? C’est possible!

Vous n’avez pas d’handicap mais souhaitez participer à l’un de nos ateliers? C’est possible!

Cards

Bonhomme 7 heures

Bonhomme 7 heures

Nicolas Biron

Contact

Jean-Pierre Ndoutoum

Coordonnées

Président

Jean-Pierre Ndoutoum

Slider

Video

Abonnez-vous !

Ce site web utilise les cookies