Text Grid 

<div class="text-grid">
    <div>
        <h3 class="text-grid__heading">What is Legacy Modernization?</h3>
        <p>Legacy modernization is the process of updating and transforming outdated software systems, applications, and infrastructure to meet current business needs and technological standards.</p>
    </div>
    <div>
        <h3 class="text-grid__heading">Why modernize legacy systems?</h3>
        <p>Modernizing legacy systems improves performance, reduces maintenance costs, enhances security, and enables integration with modern technologies and platforms.</p>
    </div>
    <div>
        <h3 class="text-grid__heading">What are the main challenges?</h3>
        <p>Common challenges include technical debt, limited documentation, dependency on outdated technologies, and the risk of disrupting ongoing business operations.</p>
    </div>
    <div>
        <h3 class="text-grid__heading">How long does modernization take?</h3>
        <p>The timeline varies depending on system complexity, scope, and approach. Projects can range from several months to multiple years.</p>
    </div>
</div>
 
<div class="text-grid">
    {{#each items}}
    <div>
        <h3 class="text-grid__heading">{{ heading }}</h3>
        <p>{{ text }}</p>
    </div>
    {{/each}}
</div>
 
{
  "items": [
    {
      "heading": "What is Legacy Modernization?",
      "text": "Legacy modernization is the process of updating and transforming outdated software systems, applications, and infrastructure to meet current business needs and technological standards."
    },
    {
      "heading": "Why modernize legacy systems?",
      "text": "Modernizing legacy systems improves performance, reduces maintenance costs, enhances security, and enables integration with modern technologies and platforms."
    },
    {
      "heading": "What are the main challenges?",
      "text": "Common challenges include technical debt, limited documentation, dependency on outdated technologies, and the risk of disrupting ongoing business operations."
    },
    {
      "heading": "How long does modernization take?",
      "text": "The timeline varies depending on system complexity, scope, and approach. Projects can range from several months to multiple years."
    }
  ]
}
  • Content: 
    .text-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: $spacer-md;
  margin-top: $spacer-base;

  &__heading {
    @extend %heading-font-bold;

    font-size: $font-size-sm;

    + p {
      margin-top: $spacer-xxs;
    }
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .text-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    row-gap: $spacer-lg;
    column-gap: $spacer-lg;

    &__heading {
      font-size: $font-size-md;
    }
  }
}
  • URL: /components/raw/text-grid/_text-grid.scss
  • Filesystem Path: components/04-molecules/text-grid/_text-grid.scss
  • Size: 494 Bytes

No notes defined.