Relevant Resources

Official documentation: Tachyons’ component

Translate Tachyon to R

Example 1: Large Paragraph

With multiple classes, class argument in tags can be a vector.

library(htmltools)

text_paragraph <- "Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose."
large_paragraph <- withTags(
  text_paragraph |> 
    p(class = c("f4", "lh-copy measure")) |> 
    main(class = c("pa3", "pa5-ns"))
)
large_paragraph

Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.

str(large_paragraph)

List of 3
 $ name    : chr "main"
 $ attribs :List of 1
  ..$ class: chr [1:2] "pa3" "pa5-ns"
 $ children:List of 1
  ..$ :List of 3
  .. ..$ name    : chr "p"
  .. ..$ attribs :List of 1
  .. .. ..$ class: chr [1:2] "f4" "lh-copy measure"
  .. ..$ children:List of 1
  .. .. ..$ : chr "Typography has one plain duty before it and that is to convey information in writing. No argument or considerat"| __truncated__
  .. ..- attr(*, "class")= chr "shiny.tag"
 - attr(*, "class")= chr "shiny.tag"

Example 2: Title and Subtitle

withTags(
  header(
    h1("This is the title", class = c("f3", "f2-m", "f1-l", "fw2", "black-90", "mv3")),
    h2("This is the subtitle where additional information can go", 
       class = c("f5", "f4-m", "f3-l", "fw2", "black-50", "mt0", "lh-copy"))
  )
)

This is the title

This is the subtitle where additional information can go

Example 3: Logo Title

title = "Jihong Zhang"
subtitle = "Play Harder, Learn Harder"
header_class <- "bg-white black-80 tc pv4 avenir"
a_class <- "bg-black-80 ba b--black dib pa3 w2 h2 br-100"
h1_class <- "mt2 mb0 baskerville i fw1 f1"
h2_class <- "mt2 mb0 f6 fw4 ttu tracked"
svg_one_dot <- a(tags$svg(class = "white", `data-icon`="skull", viewBox="0 0 32 32", style="fill:currentcolor"), class = a_class)

tags$header(class = header_class) |> 
    tagAppendChild(svg_one_dot) |> 
    tagAppendChild(h1(title, class = h1_class)) |> 
    tagAppendChild(h2(subtitle, class= h2_class))