Section (section)

Not found in the upstream documentation, but found in the USWDS examples.

ID Label Description Schema
content Content
            id: section
label: Section
description: 'Not found in the upstream documentation, but found in the USWDS examples.'
group: Layout
variants:
    default:
        id: default
        label: 'No background (default)'
    light:
        id: light
        label: 'Light background'
    dark:
        id: dark
        label: 'Dark background'
slots:
    content:
        id: content
        label: Content
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': section
            content:
                -
                    '@element': p
                    '@content': 'Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.'
                -
                    '@component': button
                    label: 'Call to action'
                    url: '#'

          

No background (default) ( default )

Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.

Call to action
<section class="usa-section"> <div class="grid-container"> <p>Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.</p> <a class="usa-button" href="#" role="button">Call to action</a> </div> </section>

Light background ( light )

Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.

Call to action
<section class="usa-section--light usa-section"> <div class="grid-container"> <p>Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.</p> <a class="usa-button" href="#" role="button">Call to action</a> </div> </section>

Dark background ( dark )

Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.

Call to action
<section class="usa-section--dark usa-section"> <div class="grid-container"> <p>Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.</p> <a class="usa-button" href="#" role="button">Call to action</a> </div> </section>