Listing all avaiable components and provising guidance on typography and other low-level formatting.

Typography

heading level 1

heading level 2

heading level 3

heading level 4

Standard content body text style.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quibusdam quaerat iusto fugiat voluptates iure quae cum, minima ea corporis natus similique quia aspernatur impedit fugit doloribus quas totam rem?

Text can include inline code style with the code element

Text can also include hypertext links. This is the web, after all.

Cards

  
  <summary-card title="A regular card">
    Some <b>html</b> is ok in this content section. the CTA link is optional, and this card doesn't have one.
  </summary-card>
  

  
  <summary-card class="highlight"
    title="A highlight card"
    cta="To the about page"
    @url="/about"
  >
    Some <b>html</b> is ok in this content section
  </summary-card>
  

Buttons and Calls to Action

  
    <cta-button url="/some-url">
      Button text
    </cta-button>
  

  
  <cta-button 
    class="ghost"
    url="/some-url"
  >
    Button text
  </cta-button>
  

Code and preformatted text

  
eleventyConfig.addPlugin(pluginWebc, {
  components: "site/_includes/components/**/*.webc"
});