KPI Cards as Hugo ShortCodes Guidance

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

Any examples, hints? Thanks! Adam

Not tested


.icon {  
  float: right;
  position: absolute;
  opacity: .16;

  width: 1200px;
  display: flex;

  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;

  background: #886ab5;
  color: #fff;

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

  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 {
  font-size: 70%;
  padding-left: 0.2em;

<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>

your code in md file

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

1 Like

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.

Yes. He can put whatever css he wants.

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

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