Skip to main contentSkip to main navigationSkip to footer links
Anthropoloy, genetics and peopling history
Start of main navigation.
Start of main content.

Pattern library

An overview of the styles and layouts that can be used on this site.

This page serves as an illustration of what is currently available in terms of bloc layout and typographic styles, and also as a test page to check if everything still looks good after the deployment of new components or styles.

Last updated on 2023-11-22


✅ Logo

The AGP logo comes in colour and monochrome versions [ download v0.11e ]

Colour

Anthropoloy, genetics and peopling history

Colour reversed

Anthropoloy, genetics and peopling history

Black

Anthropoloy, genetics and peopling history

White

Anthropoloy, genetics and peopling history

Small (abbr only)

Anthropoloy, genetics and peopling history Anthropoloy, genetics and peopling history Anthropoloy, genetics and peopling history Anthropoloy, genetics and peopling history Anthropoloy, genetics and peopling history Anthropoloy, genetics and peopling history

The font used in the logo is Montserrat, except the ampersand which is in Goudy Old Style italic.


✅ Colours

About the colours.


✅ Font

The font used on this website is called Lato. Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish).

The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz. Learn more at www.latofonts.com.

Lato light (300) - used in body copy
AaªÁáÀàÂâÅåÄäÃãĄąÆæBbCcĆćÇçDdÐðEeÉéÈèÊêËëĘęFffiflƒGgHhIiÍíÌìÎîÏïıJjKkLlŁłMmNnŃńÑñOoºÓóÒòÔôÖöÕõØøŒœPpQqRrSsŚśŠšßTtUuÚúÙùÛûÜüVvWwXxYyÝýŸÿZzŹźŽžŻżÞþ01¹½¼2²3³¾456789_​-,;:!¡?¿.·«»()[]{}@*/​\&#%´˜^¯˘˙¨˚˝¸˛§©®ˆˇˉ°+±÷×<=>¬|¦~¤¢$£¥µπΩ
Lato light italic (300) - used in body copy
AaªÁáÀàÂâÅåÄäÃãĄąÆæBbCcĆćÇçDdÐðEeÉéÈèÊêËëĘęFffiflƒGgHhIiÍíÌìÎîÏïıJjKkLlŁłMmNnŃńÑñOoºÓóÒòÔôÖöÕõØøŒœPpQqRrSsŚśŠšßTtUuÚúÙùÛûÜüVvWwXxYyÝýŸÿZzŹźŽžŻżÞþ01¹½¼2²3³¾456789_​-,;:!¡?¿.·«»()[]{}@*/​\&#%´˜^¯˘˙¨˚˝¸˛§©®ˆˇˉ°+±÷×<=>¬|¦~¤¢$£¥µπΩ
Lato bold (700) - used headings and emphasis
AaªÁáÀàÂâÅåÄäÃãĄąÆæBbCcĆćÇçDdÐðEeÉéÈèÊêËëĘęFffiflƒGgHhIiÍíÌìÎîÏïıJjKkLlŁłMmNnŃńÑñOoºÓóÒòÔôÖöÕõØøŒœPpQqRrSsŚśŠšßTtUuÚúÙùÛûÜüVvWwXxYyÝýŸÿZzŹźŽžŻżÞþ01¹½¼2²3³¾456789_​-,;:!¡?¿.·«»()[]{}@*/​\&#%´˜^¯˘˙¨˚˝¸˛§©®ˆˇˉ°+±÷×<=>¬|¦~¤¢$£¥µπΩ

Note: the default font weight (300) might change in the future as the contrast ratio isn't optimal with small font sizes (if only Lato existed as a variable font…).


✅ Section headings

Heading information is used by user agents to construct a table of contents for a document automatically. They structure the document semantically. Avoid using multiple level 1 headings per page.

Level 1 heading

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Level 2 heading

It was going to rain. The weather forecast didn’t say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.

Level 3 heading

It was a question of which of the two she preferred. On the one hand, the choice seemed simple. The more expensive one with a brand name would be the choice of most. It was the easy choice. The safe choice. But she wasn’t sure she actually preferred it.


✅ Paragraphs

Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation.

Lead (or lede) paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Regular paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Secondary paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Tertiary paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.


✅ Quotes

Blockquotes are used for an extended quotation.

The greatest scientists are also the greatest dreamers, constantly envisioning new possibilities and exploring uncharted territories of the mind.
Jane Goodall

✅ Lists

Lists can be ordered (alphanumerically) or unordered (bullets, or nothing).

Type of lists

  • None
  • Disc
  • Circle
  • Square
  • Decimal
  • Decimal leading zero
  • Upper roman
  • Lower greek
  • Lower alpha
  • Upper alpha
  • Armenian
  • Georgian

Unordered list

  • unordered item
  • unordered item
  • unordered item
  • unordered item

Ordered list

  1. ordered item
  2. ordered item
  3. ordered item
  4. ordered item

Nested lists

  • unordered item
  • unordered item
    1. ordered item
    2. ordered item
    3. ordered item
      • unordered item
      • unordered item
    4. ordered item
  • unordered item

✅ Text level elements

Text can be formatted and styled.

Text level HTML elements may be used within other elements. They include: em and strong for semantic emphasis, i and b for presentational formatting, abbr abbreviations, cite citations, code example, del, ins for visibly deleted and inserted content, dfn definitions, mark for highlighted passages and sup superscript and sub subscript.

Hyperlink are displayed underlined in the brand colour, except in headings (but we should avoid adding links to headings).The background colour changes on hover.


✅ Media

Media assets can be images, videos, audio files, or downloadable files.

Video

YouTube or Vimeo can be embedded in a page. Please use YT's nocookie domain or Vimeo's DNT argument to minimise user tracking:

//www.youtube-nocookie.com/embed/uV54oa0SyMc?rel=0&cc_load_policy=1
//player.vimeo.com/video/845246808?dnt=true

Starling murmuration 2020 #Geldermalsen

Audio

An audio file can be self-hosted or remotely embedded. Prefer self hosting when possible.

RTS - CQFD : Rencontre avec Alicia Sanchez-Mazas, grande spécialiste de lʹévolution du système immunitaire

File

File assets do not display their content on screen, but offer a download option.


✅ Patterns

We have a few layout patterns to play around with to layout our content.

Cards (person)

Cards (project)

Cards (highlight)

Content with aside box

Molecular diversity and evolution of HLA genes in Africa (HLA-AFRICA)

This project aims at investigating the molecular diversity and evolution of the MHC (HLA) genes involved in adaptive immunity in a large set of human populations in Africa. It will answer the question of whether genetic adaptations to pathogenic environments, which are thought to drive the evolution of MHC genes, have significantly modelled the genetic structure of populations in this continent, which will enlighten our knowledge on the evolutionary mechanisms that marked the history of our species. Read more


Person vCard

Alicia Sanchez-Mazas

Full Professor / Professeure ordinaire

My main scientific interest is to understand the genetic diversity and evolution of human populations, with a main focus on the evolution of immune genes (MHC, HLA): how to explain the molecular differences and similarities observed within and between populations worldwide? What does this genetic variation tell us about, on one hand, the history of our species and, on the other hand, the immune adaptation of humans to different environments?

Dépt. de Génétique & Evolution
Laboratoire AGP
Quai Ernest-Ansermet 30
1205 Genève / Suisse
4-401
+41 22 379 69 84
alicia.sanchez-mazas@unige.ch

Tabs navigation

Hot spot

Gave read use way make spot how nor. In daughter goodness an likewise oh consider at procured wandered. Songs words wrong by me hills heard timed. Happy eat may doors songs. Be ignorant so of suitable dissuade weddings together. Least whole timed we is. An smallness deficient discourse do newspaper be an eagerness continued. Mr my ready guest ye after short at.

Bachelor juvenile

He do subjects prepared bachelor juvenile ye oh. He feelings removing informed he as ignorant we prepared. Evening do forming observe spirits is in. Country hearted be of justice sending. On so they as with room cold ye. Be call four my went mean. Celebrated if remarkably especially an. Going eat set she books found met aware.

Perpetual sincerity

Perpetual sincerity out suspected necessary one but provision satisfied. Respect nothing use set waiting pursuit nay you looking. If on prevailed concluded ye abilities. Address say you new but minuter greater. Do denied agreed in innate. Can and middletons thoroughly themselves him. Tolerably sportsmen belonging in september no am immediate newspaper. Theirs expect dinner it pretty indeed having no of. Principle september she conveying did eat may extensive.


Accordion navigation

Gave read use way make spot how nor. In daughter goodness an likewise oh consider at procured wandered. Songs words wrong by me hills heard timed. Happy eat may doors songs. Be ignorant so of suitable dissuade weddings together. Least whole timed we is. An smallness deficient discourse do newspaper be an eagerness continued. Mr my ready guest ye after short at.

He do subjects prepared bachelor juvenile ye oh. He feelings removing informed he as ignorant we prepared. Evening do forming observe spirits is in. Country hearted be of justice sending. On so they as with room cold ye. Be call four my went mean. Celebrated if remarkably especially an. Going eat set she books found met aware.

Perpetual sincerity out suspected necessary one but provision satisfied. Respect nothing use set waiting pursuit nay you looking. If on prevailed concluded ye abilities. Address say you new but minuter greater. Do denied agreed in innate. Can and middletons thoroughly themselves him. Tolerably sportsmen belonging in september no am immediate newspaper. Theirs expect dinner it pretty indeed having no of. Principle september she conveying did eat may extensive.


Publication list

Try to use a archive-ouverte script whenever possible.

Latest publications

  • Gloor Y. S., Matthey A., Sobo K., Mouterde M., Kosek E., Pickering G., Poloni E. S., Cedraschi C, Ehret G., Desmeules J. (2022) Uncovering a GeneticPolymorphism Located in HAP1 in Modulation of Central Pain Signaling Pathways. Frontiers in neuroscience, https://www.frontiersin.org/articles/10.3389/fnins.2022.807773/abstract
  • Gombault C., Grenet G., Segurel L., Duret L., Gueyffier F., Cathébras P., Pontier D., Mainbourg S., Sanchez-Mazas A., Lega J.-C. (2022) Population designationsin biomedical research: Limitations and perspectives. HLA. 2022; 1- 13. DOI: https://doi.org/10.1111/tan.14852
  • Di D., Thomas J. S., Currat M., Nunes J.-M., Sanchez-Mazas A. (2022) Challenging ancient DNA results about putative HLA protection or susceptibility to Yersinapestis. Molecular Biology and Evolution, msac073. DOI: https://doi.org/10.1093/molbev/msac073
  • Silva N. M., Kreutzer S., Souleles A., Triantaphyllou S., Kotsakis K., Urem‑Kotsou D., Halstead P., Efstratiou N., Kotsos S., Karamitrou‑Mentessidi G., Adaktylou F.,Chondroyianni‑Metoki A., Pappa M., Ziota C., Sampson A., Papathanasiou A., Vitelli K., Cullen T., Kyparissi‑Apostolika N., Lanz A. Z., Peters J., Rio J., Wegmann D., Burger J., Currat M., Papageorgopoulou C. (2022) Ancient mitochondrial diversity reveals population homogeneity in Neolithic Greece and identifies population dynamics along theDanubian expansion axis. Sci Rep 12, 13474 DOI: https://doi.org/10.1038/s41598-022-16745-8

Previous publications


Multicolumn paragraph

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere. Dicta excepturi nobis nostrum!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere. Dicta excepturi nobis nostrum! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere. Dicta excepturi nobis nostrum!<

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere. Dicta excepturi nobis nostrum!


Multicolumn wide paragraph

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere. Dicta excepturi nobis nostrum!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere.

Dicta excepturi nobis nostrum! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere. Dicta excepturi nobis nostrum!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere. Dicta excepturi nobis nostrum!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ipsam maxime vero, aperiam distinctio ea doloremque voluptates enim laudantium soluta aliquid non, tenetur, et temporibus facere.


Outreach list

Important articles are wider and have a thumbnail.

Start of footer links.