KPI Cards as Hugo ShortCodes Guidance

support
1

I’m new to Hugo and loving it - wanted to transform a simple HTML widget to shortcode to create a basic HTML based on this https://codepen.io/ricardomaia/pen/BajKLmE

Any examples, hints? Thanks! Adam

2

Not tested

layouts/shortcodes/card.html


<style>
.icon {  
  float: right;
  font-size:500%;
  position: absolute;
  top:0rem;
  right:-0.3rem;
  opacity: .16;
}


#container
{
  width: 1200px;
  display: flex;
}

.grey-dark
{
  background: #495057;
  color: #efefef;
}

.red-gradient {
  background: linear-gradient(180deg, rgba(207,82,82,1) 0%, rgba(121,9,9,1) 80%);
  color: #fff;
}
.red {
  background: #a83b3b;
  color: #fff;
}


.purple
{
  background: #886ab5;
  color: #fff;
}

.orange {
  background: #ffc241;
  color: #fff;
}

.kpi-card
{
  overflow: hidden;
  position: relative;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.75);;
  display: inline-block;
  float: left;
  padding: 1em;
  border-radius: 0.3em;
  font-family: sans-serif;  
  width: 240px;
  min-width: 180px;
  margin-left: 0.5em;
  margin-top: 0.5em;
}

.card-value {
  display: block;
  font-size: 200%;  
  font-weight: bolder;
}

.card-text {
  display:block;
  font-size: 70%;
  padding-left: 0.2em;
}
</style>

<div id="container">
  <div class="kpi-card  {{ .Get "color" }}">
    <span class="card-value">$ {{ .Get "total" }} </span>
    <span class="card-text"> {{ .Get "title" }}</span>
     <i class="fas fa-shopping-cart icon"></i>
  </div>
</div>

your code in md file

some text , bla bla 
{{< card color="orange" total=1324 title="Total Sales" >}}
some text , bla bla
1 Like
3

I’d go for grid and/or flex layout rather than float. It’s 2023… And no pixel width, either, if you want to have a layout that’s usable on mobile.

4

Yes. He can put whatever css he wants.

I just copy/pasted his code to show him how to do it the Hugo way.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.