Dcode Design System

Container: Narrow Constrained With Padded Content

No notes defined.

<div class="container">
    <!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
    <div class="max-w-3xl mx-auto">
        <div class="prose lg:prose-xl lg:py-xlSpace">
            <h1>Narrow container</h1>
            <p>Best suited for blog and article copy.</p>
            <p>To determine line length for optimum readability, a good guideline is between 9 and 12 words for unjustified text. Fewer words may cause the sentence structure to break up, and may also result in too many hyphenations. Both of these reduce readability.</p>
        </div>
    </div>
</div>
  • Content: 
    .container--narrow {
    @apply max-w-3xl;
}

.container--wide {
    @apply max-w-full;
}
  • URL: /components/raw/container/container.scss
  • Filesystem Path: components/05-layout/02-container/container.scss
  • Size: 89 Bytes
  • Content: 
    https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D1%253A26%26t%3D7PFoNpgoOhnxO9FX-1
  • URL: /components/raw/container/figma.txt
  • Filesystem Path: components/05-layout/02-container/figma.txt
  • Size: 179 Bytes
  • Handle: @container--narrow-constrained-with-padded-content
  • Preview:
  • Filesystem Path: components/05-layout/02-container/container--narrow-constrained-with-padded-content.hbs