Text 267 Style 02: Float Number – Title, Description

Description

• text block, float number (left) – float title, description (right)
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, add a Text Block

• Use Unordered List
• Use Heading 3 for Text
• Use Shift Enter to add line break

#1.2. Hover on top right of section > Click EDIT SECTION > at Design > Anchor Link > enter word: about-main

#1.3. Use code to Page Header Injection

<!-- 10.26c21v07 Text 267 Style 02: Float Number - Title, Description -->
<style>
  #about-main .sqs-html-content > ul[data-rte-list] {
  --step-number-width: 56px;
  --step-space: 22px;
  --step-text-space: 6px;
  --step-line-color: color-mix(in srgb, currentColor 10%, transparent);
  --step-number-size: var(--small-text-size);
  --step-number-color: hsl(var(--accent-hsl));
  padding-left: 0;
  counter-reset: step;
  & > li {
    display: grid;
    grid-template-columns: var(--step-number-width) minmax(0, 1fr);
    align-items: baseline;
    margin: 0;
    padding: var(--step-space) 0;
    border-bottom: 1px solid var(--step-line-color);
    counter-increment: step;
    &::before {
      content: counter(step, decimal-leading-zero);
      font-size: var(--step-number-size);
      color: var(--step-number-color);
    }
    & > h3 {
      margin: 0;
      &::before { content: none; }
    }
    & > .step-text {
      grid-column: 2;
      margin: var(--step-text-space) 0 0;
    }
  }
}
</style>
<script>
window.StepTextConfig = {
  headingSelector: '#about-main .sqs-html-content > ul[data-rte-list] > li > h3'
};
</script>
<script src="https://code.beaverhero.com/textblock/1026c21v07text267style02float.js"></script>

#2. Customize

#2.1. To change number style, change these lines (you can enter a hex color)

--step-number-size: var(--small-text-size);
  --step-number-color: hsl(var(--accent-hsl));

#2.2. To change line color, change this line, you can enter a hex color

--step-line-color: color-mix(in srgb, currentColor 10%, transparent);