Hex Header

css

Add row of hexes to header of slide

Emil Hvitfeldt true
05-22-2021

A row of hex stickers at the top of a slide is a great way to indicate to the viewer what packages are being used when.

We can accomplish this using a custom function hexes and a css class.

Simply put the required hex stickers in the images/ folder. (code assumes that all hexes are .png files) and add this to the end of a header to include the hexes.

`r hexes("xaringan")`

Trick by Max Kuhn

Result

Rmd

---
output:
  xaringan::moon_reader:
    css: ["default", "style.css"]
    lib_dir: libs
    seal: FALSE
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, echo=FALSE}
hexes <- function(x) {
  x <- paste0(x, ".png")
  markup <- function(pkg) {
    glue::glue('<img src="images/{pkg}" class="title-hex">')
  }
  res <- purrr::map_chr(x, markup)
  I(paste0(res, collapse = ""))
}
```

# One hex `r hexes("xaringan")`

Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.

---

# Two hexes `r hexes(c("xaringan", "xaringanthemer"))`

Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.

style.css

.title-hex{
  height: 50px;
  align: middle;
  float: right;
}

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".

Citation

For attribution, please cite this work as

Hvitfeldt (2021, May 22). Xaringan Gallery: Hex Header. Retrieved from https://xaringan.gallery/examples/hex-header/

BibTeX citation

@misc{hvitfeldt2021hex,
  author = {Hvitfeldt, Emil},
  title = {Xaringan Gallery: Hex Header},
  url = {https://xaringan.gallery/examples/hex-header/},
  year = {2021}
}