02.01 Boxy – Vyjádření klientů
Zdrojové CSS: /src/css/molecules/box/_testimonial.scss
Výchozí molekula s vyjádřením. Autor nemusí být odkazem. Pozor na správné použití uvozovek v tagu .box-testimonial__comment.
<blockquote class="box-testimonial">
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author">
<a href="#">
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</a>
</cite>
</blockquote>Tento blok v Umbracu vytvoříte...
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
Jana Nejedlá
studentka druhého ročníku
Výchozí molekula s vyjádřením doplněná o avatar. Na box-testimonial__author se přidává modifikátor with-img. Obrázek by měl mít rozměr 62x62px. Opět nemusí být autor odkazem.
<blockquote class="box-testimonial">
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author with-img">
<a href="#">
<span class="box-testimonial__author__img">
<img src="../img/illust/avatar.png" alt="Avatar" width="62" height="62">
</span>
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</a>
</cite>
</blockquote>Výchozí molekula s vyjádřením doplněná o avatar. Na box-testimonial__author se přidává modifikátor with-img. Obrázek by měl mít rozměr 62x62px. Opět nemusí být autor odkazem.
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
Jana Nejedlá
studentka druhého ročníku
Výchozí molekula s avatarem doplněná o ohraničení. Na box-testimonial se přidává modifikátor box-testimonial--bordered. Může se použít i verze bez avataru.
<blockquote class="box-testimonial box-testimonial--bordered">
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author with-img">
<a href="#">
<span class="box-testimonial__author__img">
<img src="../img/illust/avatar.png" alt="Avatar" width="62" height="62">
</span>
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</a>
</cite>
</blockquote>Výchozí molekula s avatarem doplněná o ohraničení. Na box-testimonial se přidává modifikátor box-testimonial--bordered. Může se použít i verze bez avataru.
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
studentka druhého ročníku
Výchozí molekula s avatarem doplněná o ohraničení nahoře a dole. Na box-testimonial se přidává modifikátor box-testimonial--bordered-top-bottom. Může se použít i verze bez avataru.
<blockquote class="box-testimonial box-testimonial--bordered-top-bottom">
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author with-img">
<a href="#">
<span class="box-testimonial__author__img">
<img src="../img/illust/avatar.png" alt="Avatar" width="62" height="62">
</span>
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</a>
</cite>
</blockquote>Výchozí molekula s avatarem doplněná o ohraničení nahoře a dole. Na box-testimonial se přidává modifikátor box-testimonial--bordered-top-bottom. Může se použít i verze bez avataru.
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
studentka druhého ročníku
Výchozí molekula s avatarem doplněná o pozadí primární barvy. Na box-testimonial se přidává modifikátor box-testimonial--background. Může se použít i verze bez avataru.
<blockquote class="box-testimonial box-testimonial--background">
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author with-img">
<a href="#">
<span class="box-testimonial__author__img">
<img src="../img/illust/avatar.png" alt="Avatar" width="62" height="62">
</span>
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</a>
</cite>
</blockquote>Výchozí molekula s avatarem doplněná o pozadí primární barvy. Na box-testimonial se přidává modifikátor box-testimonial--background. Může se použít i verze bez avataru.
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
studentka druhého ročníku
Výchozí molekula s vyjádřením doplněná o velký avatar. Oproti výchozí molekule byl na box-testimonial přidán modifikátor box-testimonial--avatar a lehce bylo změněno html. Obrázek by měl mít rozměr 240x240px. Autor a obrázek může být doplněn o odkaz.
CTA tlačítko lze použít kterékoliv z atomu Button
<blockquote class="box-testimonial box-testimonial--avatar">
<p class="box-testimonial__img">
<img src="../img/illust/avatar-bigger.png" alt="Avatar" width="240" height="240">
</p>
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author">
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</cite>
<p>
<a href="#" class="btn btn-primary btn-s">
<span>Button</span>
</a>
</p>
</blockquote>Výchozí molekula s vyjádřením doplněná o velký avatar. Oproti výchozí molekule byl na box-testimonial přidán modifikátor box-testimonial--avatar a lehce bylo změněno html. Obrázek by měl mít rozměr 240x240px. Autor a obrázek může být doplněn o odkaz.
CTA tlačítko lze použít kterékoliv z atomu Button
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
Jana Nejedlá
studentka druhého ročníku
Molekula vycházející z molekuly S velkým avatarem doplněná o ohraničení. Oproti molekule byl na box-testimonial přidán ještě modifikátor box-testimonial--bordered. Obrázek by měl mít rozměr 180x180px.
CTA tlačítko lze použít kterékoliv z atomu Button
<blockquote class="box-testimonial box-testimonial--avatar box-testimonial--bordered">
<p class="box-testimonial__img">
<img src="../img/illust/avatar-big.png" alt="Avatar" width="180" height="180">
</p>
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author">
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</cite>
<p>
<a href="#" class="btn btn-primary btn-s">
<span>Button</span>
</a>
</p>
</blockquote>Molekula vycházející z molekuly S velkým avatarem doplněná o ohraničení. Oproti molekule byl na box-testimonial přidán ještě modifikátor box-testimonial--bordered. Obrázek by měl mít rozměr 180x180px.
CTA tlačítko lze použít kterékoliv z atomu Button
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
Jana Nejedlá
studentka druhého ročníku
Molekula vycházející z molekuly S velkým avatarem doplněná o pozadí. Oproti molekule byl na box-testimonial přidán ještě modifikátor box-testimonial--background. Obrázek by měl mít rozměr 180x180px.
CTA tlačítko lze použít kterékoliv z atomu Button
<blockquote class="box-testimonial box-testimonial--avatar box-testimonial--background">
<p class="box-testimonial__img">
<img src="../img/illust/avatar-big.png" alt="Avatar" width="180" height="180">
</p>
<p class="box-testimonial__comment">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author">
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</cite>
<p>
<a href="#" class="btn btn-white btn-border btn-s">
<span>Button</span>
</a>
</p>
</blockquote>Molekula vycházející z molekuly S velkým avatarem doplněná o pozadí. Oproti molekule byl na box-testimonial přidán ještě modifikátor box-testimonial--background. Obrázek by měl mít rozměr 180x180px.
CTA tlačítko lze použít kterékoliv z atomu Button
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
Jana Nejedlá
studentka druhého ročníku
<blockquote class="box-hero box-hero--bordered">
<div class="row-main">
<div class="box-hero__img">
<img src="../img/illust/testimonial-photo.jpg" alt="" width="980" height="653">
</div>
<div class="box-hero__particles"></div>
<div class="box-hero__content">
<div class="box-hero__content-inner">
<p class="big">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author">
<strong class="dark">Jana Nejedlá</strong><br>
studentka druhého ročníku
</cite>
<p>
<a href="#" class="btn btn-primary btn-s">
<span>Button</span>
</a>
</p>
</div>
</div>
</div>
</blockquote>
„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
Jana Nejedlá
studentka druhého ročníku
<blockquote class="box-hero box-hero--background">
<div class="row-main">
<div class="box-hero__img">
<img src="../img/illust/testimonial-photo.jpg" alt="" width="980" height="653">
</div>
<div class="box-hero__particles"></div>
<div class="box-hero__content">
<div class="box-hero__content-inner">
<p class="big">„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“</p>
<cite class="box-testimonial__author">
<strong>Jana Nejedlá</strong><br>
studentka druhého ročníku
</cite>
<p>
<a href="#" class="btn btn-white btn-border btn-s">
<span>Button</span>
</a>
</p>
</div>
</div>
</div>
</blockquote>„Dějepis mě bavil už na gymnáziu, navíc mě zaujala prezentace oboru na veletrhu škol. Na brněnské historii je hodně předmětů, mnoho jich je výběrových a dost také záleží na vyučujícím. Dobré jsou výuky mladých doktorandů, ti jsou do toho zapálení. Nadstandardní jsou některé výběrové kurzy.“
Jana Nejedlá
studentka druhého ročníku
Výchozí molekula s vyjádřením. Autor nemusí být odkazem. Pozor na správné použití uvozovek v tagu .box-testimonial__comment.