Row of Resizable Text Boxes

Code Snippet Library

For this style, we are using the grid-row class to group text blocks on a page so they will be aligned on a wider screen and collapse into shorter rows on smaller screens. This style works best with six or fewer content blocks of similar length; otherwise, they will not align correctly. You can find similar code for use grouping images in the Image module and Tables in the Tables module, although you can add text, images, and tables to this style as well.

Use with caution: This style depends on an unsupported Canvas class that does not work in the mobile app. On mobile, the content will display vertically.

 

Example

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code to Copy     <div style="display: flex;">
    <div class="grid-row" style="grid-gap: 5%; margin: 0; width: 100%;">
        <div class="col-xs" style="margin: 1rem 0; padding: 1 rem; border: 2px solid #001E44; background-color: #eef3f7; border-radius: 0.3rem; ">
            <h3>Heading</h3>
            <p>Your content.</p>
              </div>
        <div class="col-xs" style="margin: 1rem 0; padding: 1 rem; border: 2px solid #001E44; background-color: #eef3f7; border-radius: 0.3rem; ">
            <h3>Heading</h3>
            <p>Your content.</p>
              </div>
<div class="col-xs" style="margin: 1rem 0; padding: 1 rem; border: 2px solid #001E44; background-color: #eef3f7; border-radius: 0.3rem; ">       
            <h3>Heading</h3>
            <p>Your content.</p>
       </div>
    </div>
</div>

 

Guidelines and Modifications

  • Use small blocks of content that are the same length.
  • Limit the number of items to six or fewer to get a good result.
  • Remove or modify the border by changing the color (solid #001E44) and width (2px). 
  • Change the background color (background-color: #e6f7ff;)

 

Instructions for Use

  1. Copy the code and paste it into the page in the HTML view.
  2. Change border and background colors (see the Penn State Brand color page in the Guidelines modules for ideas).
  3. Switch to design view and add your content.
  4. To add more than 3 content blocks in a row, copy and paste the last <div> section and paste it before the two closing </div> tags. 
  5. To use only 2 blocks, delete the last <div> section.
  6. Save.