Zero Deaths Maryland Component Library

Sub Components 

<div class="component">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-lg-justify-center">
            <div class="component_inner">
                <div class="component_wrap">
                    <div class="component_wrap_item">
                        <div class="component_body">
                            <div class="typography">
                                Et convallis class iaculis primis lacinia ligula vitae dui pellentesque rhoncus erat, hac massa phasellus suspendisse elit amet eleifend netus dictumst. Primis ex dis ornare nisi adipiscing tincidunt posuere parturient neque vehicula diam, ipsum duis leo nibh sapien mattis tristique efficitur semper elementum phasellus, nascetur bibendum gravida eros dictumst vulputate enim massa dictum luctus.
                            </div>
                        </div>
                    </div>

                    <div class="component_wrap_item">
                        <div class="component_ctas">
                            <div class="component_cta">
                                <h2>Example 1. 👍</h2>
                                <a href="#" class="button">
                                    button text
                                    </button>
                            </div>

                            <div class="component_cta">
                                <h2>Example 2. ❌</h2>
                                <a href="#" class="button">
                                    button text
                                    </button>
                            </div>

                            <div class="component_cta">
                                <h2>Example 3. ❌</h2>
                                <a href="#" class="button">
                                    Changing the Text
                                    </button>
                            </div>

                            <div class="component_cta">
                                <h2>Example 4. 👍</h2>
                                <a href="#" class="button">
                                    👍 - Call to Action
                                    </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .component {
        --bg-color: #f2f2f2;
    }

    .component {
        position: relative;
    }

    .component_inner {
        background-color: var(--bg-color);
        padding: 40px;
    }

    .component_wrap {
        display: flex;
        flex-flow: column nowrap;
        margin: 0 -20px -20px;
    }

    @media (min-width: 768px) {
        .component_wrap {
            align-items: center;
            flex-direction: row;
        }
    }

    .component_wrap_item {
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .component_ctas {
        display: flex;
        flex-flow: column nowrap;
        margin-bottom: -15px;
    }

    .component_cta {
        margin-bottom: 15px;
        white-space: nowrap;
    }
</style>
 
<div class="component">
	<div class="fs-row">
		<div class="fs-cell {{ cell }}">
			<div class="component_inner">
				<div class="component_wrap">
					<div class="component_wrap_item">
						<div class="component_body">
							<div class="typography">
								Et convallis class iaculis primis lacinia ligula vitae dui pellentesque rhoncus erat, hac massa phasellus suspendisse elit amet eleifend netus dictumst. Primis ex dis ornare nisi adipiscing tincidunt posuere parturient neque vehicula diam, ipsum duis leo nibh sapien mattis tristique efficitur semper elementum phasellus, nascetur bibendum gravida eros dictumst vulputate enim massa dictum luctus.
							</div>
						</div>
					</div>

					<div class="component_wrap_item">
						<div class="component_ctas">
							<div class="component_cta">
								<h2>Example 1. 👍</h2>
								{% render "@example-button" %}
							</div>

							<div class="component_cta">
								<h2>Example 2. ❌</h2>
								{% render "@example-button--dark" %}
							</div>

							<div class="component_cta">
								<h2>Example 3. ❌</h2>
								{% render "@example-button--dark" with {
									text: "Changing the Text"
								} %}
							</div>

							<div class="component_cta">
								<h2>Example 4. 👍</h2>
								{% include "@example-button" with {
									text: "👍 - Call to Action",
									theme: "dark"
								} %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	.component {
		--bg-color: #f2f2f2;
	}

	.component {
		position: relative;
	}

	.component_inner {
		background-color: var(--bg-color);
		padding: 40px;
	}

	.component_wrap {
		display: flex;
		flex-flow: column nowrap;
		margin: 0 -20px -20px;
	}

	@media (min-width: 768px) {
		.component_wrap {
			align-items: center;
			flex-direction: row;
		}
	}

	.component_wrap_item {
		margin-bottom: 20px;
		padding: 0 20px;
	}

	.component_ctas {
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: -15px;
	}

	.component_cta {
		margin-bottom: 15px;
		white-space: nowrap;
	}
</style>

Sub Components

Sub-component can be include via the include or render tag. Their differences are outlined here in the fractal guide.

Examples

Example Best Practice? Description
1. 👍 This is using the render tag without any context changes.
2. ❌ This is using the render tag with a variant call.
3. ❌ This is using the render tag with a variant call and changing the context.
4. 👍 This is using the include tag and defining all the context.